10、HTML 表单
| 标签 | 描述 |
|---|---|
| <form> | 定义供用户输入的表单 |
| <input> | 定义输入域 |
| <textarea> | 定义文本域 (一个多行的输入控件) |
| <label> | 定义了 <input> 元素的标签，一般为输入标题 |
| <fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
| <legend> | 定义了 <fieldset> 元素的标题 |
| <select> | 定义了下拉选项列表 |
| <optgroup> | 定义选项组 |
| <option> | 定义下拉列表中的选项 |
| <button> | 定义一个点击按钮 |
| <datalist> |
指定一个预先定义的输入控件选项列表 |
| <keygen> |
定义了表单的密钥对生成器字段 |
| <output> |
定义一个计算结果 |
用户名&密码表单：
先来看第一个实例 --->
<body> <form action=""> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form> <p><b>注意：</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p> </body>
运行结果 --->
注意：表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。
第二个实例 --->
<body> <form action=""> Username: <input type="text" name="user"><br> Password: <input type="password" name="password"> </form> <p><b>注意：</b> 密码字段中的字符是隐藏的(显示为星号或圆圈)。</p> </body>
运行结果：
注意： 密码字段中的字符是隐藏的(显示为星号或圆圈)，通过password来创建
通过以上两个实例我们可以看到，表单中输入文本的标签是<input>，输入类型是由类型属性（type）定义的
表单的标签都是用 <form> 来设置的
<form> . input 元素 . </form>
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等
单选按钮：
<input type="radio"> 标签定义了表单单选框选项
<form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form>
运行结果 --->
复选按钮：
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>
运行结果 --->
提交按钮：
<input type="submit"> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件，表单的动作属性定义了目的文件的文件名
由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理
<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
运行结果：
简单的下拉菜单：
<form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form>
运行结果：
预选的下拉菜单：
<form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> <option value="audi">Audi</option> </select> </form>
运行结果：
创建按钮：
<form action=""> <input type="button" value="Hello world!"> </form>
运行结果：
表单属性：
<form></form>表单元素
1、name 表单命名
2、action 可以定义一个链接，提交数据后的处理页面
3、method="post | get" 提交数据的方式
4、enctype="multipar/form-data" 对表单传递的照片、压缩包、音频等文件需要用到这个编码方式
<input></input>
1、type= "text" 文本框
"password" 密码框
"radio" 选项框
"checkbox" 复选框
"file" 选择文件浏览框
"hidden" 隐藏域，客户与服务器传递数据，页面不显示
"image" 定义为一个可点击的图片，配合 action="indexDo.html" method="get" 可将表单中的数据传递传递到处理页面
"submit" 定义一个提交按钮，value 值是按钮上的默认值
"reset" 重置按钮，将同一个表单内的元素还原，value 值是按钮上的默认值
"botton" 普通按钮，为其它语言提供服务，value值是按钮上的默认值
2、name="uName" 元素的名字 页面中唯一，主要用于 和 php 、jsp 服务器语言进行交互，且互相排斥（比如单选框）
3、id="uName" 元素的编号，和js、jQuery······进行交互
4、value="请输入用户名" 默认值，对于不显示默认值的表单，给默认值对于处理数据有益
5、checked="checked" 默认选中项
下拉选框：
<select></select>
1、name
2、id
3、<optgroup label="用户籍贯"></optgroup> 提示：可以不使用
4、<optin value="1">北京</option> 选框内容
多行文本框：
<textarea></textarea>
1、rows 多行文本框所能容纳的行数
2、cols 多行文本框所能容纳的列数
输入型控件
|
Input type |
用途 |
说明 |
|
|
电子邮件地址文本框 |
|
|
url |
网页URL文本框 |
|
|
number |
数值的输入域 |
属性 值 描述 max number 规定允许的最大值 min number 规定允许的最小值 step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） value number 规定默认值 |
|
range |
特定值的范围的数值，以滑动条显示 |
属性 值 描述 max number 规定允许的最大值 min number 规定允许的最小值 step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） value number 规定默认值 |
|
Date pickers |
日期，时间选择器 |
仅Opera9+支持，包含date, month, week, time, datetime, datetime-local |
|
search |
用于搜索引擎，比如在站点顶部显示的搜索框 |
与普通文本框用法一样，只不过这样更语文化 |
|
color |
颜色选择器 |
仅Opera支持 |
表单验证
表单验证是一套系统，它为终端用户检测无效的数据并标记这些错误，是一种用户体验的优化，让web应用更快的抛出错误，但它仍不能取代服务器端的验证，重要数据还要要依赖于服务器端的验证，因为前端验证是可以绕过的。
目前任何表单元素都有八种可能的验证约束条件：
|
名称 |
用途 |
用法 |
|
valueMissing |
确保控件中的值已填写 |
将required属性设为true， <input type="text"required="required"/> |
|
typeMismatch |
确保控件值与预期类型相匹配 |
<input type="email"/> |
|
patternMismatch |
根据pattern的正则表达式判断输入是否为合法格式 |
<input type="text" pattern="[0-9]{12}"/> |
|
toolong |
避免输入过多字符 |
设置maxLength，<textarea id="notes" name="notes" maxLength="100"></textarea> |
|
rangeUnderflow |
限制数值控件的最小值 |
设置min，<input type="number" min="0" value="20"/> |
|
rangeOverflow |
限制数值控件的最大值 |
设置max，<input type="number" max="100" value="20"/> |
|
stepMismatch |
确保输入值符合min,max,step的设置 |
设置max min step，<input type="number" min="0" max="100" step="10" value="20"/> |
|
customError |
处理应用代码明确设置能计算产生错误 |
例如验证两次输入的密码是否一致，等会DEMO细说 |
部分素材来自其他博客，本页面只供学习
浙公网安备 33010602011771号