目录
一个完整的表单包括三个部分:表单域,表单控件(表单元素),提示信息。
表单域:
一个包含表单元素的区域。
form 表单 :
<form>用于定义表单域,实现用户信息的收集和传递,<form>表单会把它范围内的表单元素信息提供给服务器。
<form action = "url地址" method = "提交方式" name = "表单域的名称" >
各种元素
</form>
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 指定服务器url地址 |
| method | get/post | 设置表单数据的提交方式 |
| name | 名称 | 指定表单域的名称,用于区分多个表单域 |
表单控件:
在表单域中可以定义各种表单元素,这些元素就是允许用户在表单中输入或者选择的内容控件。
input 输入
<input type = "属性值" >
type : 不同的值对应不同的形式,如文本、复选、按钮等等。
| 属性值 | 效果 |
|---|---|
| button | 按钮 |
| checkbox | 复选框 |
| file | 定义输入字段以及浏览按钮供文件上传 |
| hidden | 隐藏的输入字段 |
| image | 图像形式提交按钮 |
| password | 密码字段,该字符被掩码 |
| radio | 单选按钮(多选一要有相同的name属性) |
| reset | 重置按钮,清除表单中的所有数据 |
| submit | 提交 |
| text | 单行输入字段,输入文本,默认20字符 |
<input> 的其他属性
| 属性 | 属性值 | 作用 |
|---|---|---|
| name | 自定 | 定义input的名称 |
| value | 自定 | 规定input的值 |
| checked | checked | 规定默认选中(单选、复选) |
| maxlength | 正整数 | 输入字符的最大长度 |
label 标注:
为<input>元素定义标注,用于绑定一个表单元素,当点击标签内的文体时,浏览器自动将点转到对应表单元素上,增加用户体验。
<label for = "sex" > 男 </label>
<input type = "radio" name = "sex" id = "sex" />
用 for 对应 id
select 下拉 :
下拉表单元素,有多个选项让用户选择时并要节约空间。
<select>
<option >选项一</option>
<option selected = "selected ">默认选中</option>
<option >选项三</option>
</select>
textarea 多文本:
多行文本框,用户输入的内容较多时。
<textarea cols="10" rows=" 5">
cols :每行的字符数
rows : 显示的行数
</textarea>