一、单选框

<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>
1
2
3
4
5
6

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

二、复选框

<div>
<input type="checkbox" name="aaa" id="html" checked>
<label for="html">htmllabel>
<input type="checkbox" name="aaa" id="js" checked>
<label for="js">jslabel>
<input type="checkbox" name="aaa" id="css">
<label for="css">csslabel>
div>
1
2
3
4
5
6
7
8

三、上传文件

<div>
<input type="file" name="" id="">
div>
1
2
3

四、用图片代替上传按钮

<form>
<input type="image" src="submit.jpg">
form>
1
2
3

五、隐藏字段

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

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

六、禁用功能

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

七、下拉菜单

<select size="3" multiple>
<option value="zz" selected>桌子option>
<option value="yz">椅子option>
<option value="dz">凳子option>
select>
1
2
3
4
5

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>
1
2
3
4
5
6
7
8
9

注意：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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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