表单格式
<form>
所有的表单内容，都要写在form标签里面
</form>
- 表单元素本身是指
<form>，不过它也有一个更广泛的概念，指构成表单的所有元素.
-
<form>主要有两个属性，分别是action和method，action表示表单数据所提交到的处理地址，method表示提交内容的方式，默认为 get，可以设置为 post.
表单元素的通用属性
| 属性名称 |
作用 |
name |
表示字段名称 |
value |
表示设置默认字段值（最后提交的表单数据就是所有的字段值） |
disabled |
表示字段是否禁用，该属性可以不用设置值，加上该属性即表示禁用 |
readonly |
表示字段是否只读，该属性可以不用设置值，加上该属性即表示只读 |
更多可参考：
Input元素
<!-- 文本输入框 -->
<input type="text" name="username">
<!-- 文本输入框提示信息 -->
<input type="text" name="username" placeholder="用户名">
<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索">
<!-- 数字输入框 -->
<input type="number" name="age" placeholder="只能输入数字">
<!-- 密码输入框 -->
<input type="password" name="pwd" placeholder="密码">
<!-- 单选框 -->
<input type="radio" name="sex" value="man">男
<!-- 复选框 -->
<input type="checkbox" name="hobby" value="music">音乐
<!-- 隐藏域 -->
<input type="hidden" name="other-data" value="用户不可见数据">
<!-- 上传文件 -->
<input type="file" name="file">
<!-- 普通按钮 -->
<input type="button" name="button" value="普通按钮">
<!-- 提交按钮 -->
<input type="submit" name="submit" value="立即加入">
<!-- 重置按钮 -->
<input type="reset" name="reset">
<input>跟<img>一样，无需闭合标签.<input>除通用属性外，还有其常见属性type与placeholder.- 当是一个输入框时，可设置
placeholder，在输入框中灰色显示提示信息.
| Input属性Type常用的值 |
作用 |
| text |
文本输入框 |
| password |
密码输入框 |
| search |
搜索框 |
| number |
数字输入框 |
| radio |
单选按钮，必须要有相同的name属性
|
| checkbox |
复选框，必须要有相同的name属性
|
| thidden |
隐藏域 |
| file |
上传文件 |
| button |
普通按钮 |
| submit |
提交按钮 |
| reset |
重置按钮 |
更多 input 请参考：
Textarea元素
<textarea rows="5" cols="30" placeholder="请输入评论"></textarea>
- 用于多行文本输入，可通过
cols 和 rows 属性来规定 <textarea> 的尺寸，不过等我们学了 CSS 之后，更好的办法是使用 CSS 的 height 和 width 属性来控制其尺寸.
cols(columns)属性表示“列”， 规定文本区内的可见宽度. rows属性表示“行”, 规定文本区内的可见行数.
更多 textarea 请参考：
Select元素
<!-- 单选且有默认选中值 -->
<select name="tag">
<option value="html" selected>HTML</option>
<option value="css">CSS</option>
<option value="js">JS</option>
</select>
<!-- 多选 -->
<select name="tags" multiple="multiple">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JS</option>
</select>
- 用于创建选项菜单，默认只能选择一个值，可通过设置属性
multiple="multiple"来实现多选（很少很少使用多选）.
- 其选项为
<option>元素，常用有两个属性value、selected，分别表示选中该选项的值与默认选中.
<select>
<optgroup label="北京市">
<option>海淀区</option>
<option>昌平区</option>
<option>朝阳区</option>
</optgroup>
<optgroup label="广州市">
<option>天河区</option>
<option>白云区</option>
</optgroup>
<option selected="selected">贵州</option>
</select>
更多 select 请参考：
button元素
<button>我是个普通按钮</button>
<!-- 下面的两种方式不建议使用 -->
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button>元素用来定义按钮，跟 input 定义的按钮不同，这个是有闭合标签的. 也可以通过设置 type 属性来实现提交按钮和重置按钮，不过不建议这么做。
更多 button 请参考：
Label元素
<!-- 包裹表单元素 -->
<label>用户名：<input type="text"></label>
<!-- 使用for属性关联表单元素的id属性 -->
<label for="username">用户名：</label><input type="text" id="username">
<label>元素用于关联表单元素的标题，可直接包裹表单元素，也可以通过设置其 for 属性关联到表单元素的 id 属性，这样点击 label 标题上关联的表单元素就可以自动获取焦点，提升用户体验.
更多 label 请参考：
更多参考
更多关于表单元素知识请参考：HTML5中的表单元素
网友评论