html表单元素

一、单选框

<div>
<input type="radio" name="aaa" id="test" checked>
<label for="test">非常满意</label>
<input type="radio" name="aaa" id="test1">
<label for="test1">满意</label>
</div>

单选框通过name属性标识一组选项，实现单选，id-for属性实现点击文字选中，checked默认选中

二、复选框

<div>
<input type="checkbox" name="aaa" id="html" checked>
<label for="html">html</label>
<input type="checkbox" name="aaa" id="js" checked>
<label for="js">js</label>
<input type="checkbox" name="aaa" id="css">
<label for="css">css</label>
</div>

三、上传文件

<div>
<input type="file" name="" id="">
</div>

四、用图片代替上传按钮

<form>
<input type="image" src="submit.jpg">
</form>

五、隐藏字段

<input type="hidden" name="" id="" value="带给后端的个人信息">

隐藏信息，用户看不见，与后端交互

六、禁用功能

禁用
<input type="text" disabled value="1111">
只读
<input type="text" readonly value="222">

七、下拉菜单

<select size="3" multiple>
<option value="zz" selected>桌子</option>
<option value="yz">椅子</option>
<option value="dz">凳子</option>
</select>

select支持的属性：
1、size 页面显示几个，多余的撑开滚动条
2、multiple 支持多选
option支持的属性
1、value 提供给后端需要的value值
2、selected 默认选中

八、多行文本输入框

#cols与rows对于字符和数字所占位置不同，不能精确设置
<textarea cols="10" rows="10">你好</textarea>
#使用css设置文本框大小
textarea{
    width:200px;
    height:200px;
    resize:vertical;
}
<textarea placeholder="提示">你好</textarea>

注意：textarea的默认值要写到两个标签之间

resize:vertical/horizontal/both/none; 重新设置输出框大小，页面中可以鼠标拖动让文本框变大变小
vertical 垂直方向变化
horizontal水平方向变化
both默认值，两个方向都能走
none两个方向都不能拖动

九、字段集

#css
fieldset{
    border:1px solid blue;
    width:400px;
    height:200px;
}
legend{
    border:1px solid white;
    text-align:left;
    padding:1px;
}

#html
<fieldset>
<legend>性别</legend>
<input type="radio" name="aa">男
</fieldset>

默认给内容加一个边框，并可以设置边框上的文字样式，如图：