表单：
HTML部分：
<body>
<form action="#">
<!--action url规定当提交表单时向何处发送数据-->
<label for="account">账号:</label>
<!--点击label可以使与其关联（通过id）的文本获得焦点-->
<input type="text" id="account" name="account" placeholder="请输入你的账号">
<!--name属性用于对提交到服务器后的表单数据进行标识 或者在客户端通过
JavaScript引用表单数据 只有设置了name属性的表单元素才能在提交
表单时传递它们的值-->
<!--placeholder 设置文本框提示文字 文本框的默认字号比正常字号小一点-->
</form>
</body>css部分：
*{
/*-moz-box-sizing: border-box;*/
}
body{
background-color:red;
}
input{
border:1px solid lightgreen;
padding: 3px 7px;
height: 30px;
}
input:hover,input:focus{
/*:focus表示具有焦点的标签*/
background-color: #3366cc;
box-shadow: inset 0px 0px 4px gray;
}常用表单元素：
HTML部分：
<body>
<form action="#">
<fieldset>
<!--fieldset元素可将表单内的相关元素分组-->
<!--<legend> 标签为 fieldset 元素定义标题。-->
<legend>请选择</legend>
<div>
<!--radio定义单选按钮。checked规定此 input 元素首次加载时应当被选中-->
<input type="radio" id="boy" name="ismale" checked>
<label for="boy">男孩</label>
<input type="radio" id="girl" name="ismale" checked>
<label for="girl">女孩</label>
</div>
<div>
<!--checkbox定义复选框-->
<input type="checkbox" id="html5" name="skill" checked>
<label for="html5">HTML5</label>
<input type="checkbox" id="css3" name="skill">
<label for="css3">css3</label>
<input type="checkbox" id="javaScript" name="skill">
<label for="javaScript">javaScript</label>
</div>
</fieldset>
<div>
<!--select元素创建单选或多选菜单-->
<!--multiple规定可以选择多个项目-->
<select name="skill" id="skill" multiple size="3">
<!--option元素定义下拉列表中个的一个选项-->
<!--selected在首次显示列表中 表现为选中状态-->
<optgroup label="技能">
<option value="1">HTML5</option>
<option value="2" selected>CSS3</option>
<option value="3" selected>JS</option>
<option value="4">PHP</option>
</optgroup>
<optgroup label="LOL">
<option value="5">德玛西亚</option>
<option value="6">维恩</option>
</optgroup>
</select>
</div>
<!--textarea标签定义多行的文本输入框-->
<!--cols规定文本区域的宽 rows规定文本区内的可见行数-->
<textarea name="text" id="text" cols="20" rows="10"></textarea>
<!--火狐下 cols 规定文本区域的宽 cols + 1(滚动条显现的情况下)
rows 规定文本区域的可见行数 rows + 1 -->
</form>
</body>CSS部分：
select{
width:250px;
height: 250px;
border:10px solid red;
padding: 5px;
resize: both;
/*resize属性规定是否可由用户调整元素的尺寸*/
}
optgroup{
font-style: normal;
}
/*optgroup:before{
content:'---------------------';
}*/
optgroup:after{
content:'---------------------';
}
fieldset{
margin: 0;
border-width: 1px;
}
textarea{
/*resize:none;*/
/*none; 用户无法调整元素的尺寸。
both用户可调整元素的高度和宽度。
horizontal用户可调整元素的宽度。
vertical用户可调整元素的高度。*/
/*font-size:3rem;*/
/*改变字号会连带造成多行文本框变大*/
overflow: scroll;
}演示效果：
表单
常用表单元素