表单

 表格元素格式

 

```属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
name	指定表单元素的名称
value	元素的初始值。type 为 radio时必须指定一个值
size	指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text 或 password 时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

表单语法

文本框

       语法

密码框

              语法

单选按钮

              语法

复选框

              语法

下拉列表框

                     语法

图片按钮

 

多行文本域

                     语法

文件域

                     语法

邮箱

              语法

网址

              语法

数字

              语法

滑块

          语法

搜索框

              语法

          

协议

              示例

                     协议：<textarea cols="30" rows="10">

遵循xxx协议

</textarea>

文件上传

              示例

                     文件上传<input type="file" name="file" value="上传"/>

 

注册/提交

              示例

                     注册/提交<input type="submit" value="注册"/>

 

 

<input type="button" value="普通按钮"/>

 

<input type="reset" value="重置"/>

 

 

隐藏域

              <input type="hidden" value="666" name="userid">

 

只读和禁用

       只读readonly   禁用disabled

<input name="name" type="text" value="张三"  readonly>

<input type="submit "  disabled   value="保存" >

 

1. 增强鼠标的可用性
2. 自动将焦点转移到与该标注相关的表单元素上

          

表单初级验证的方法

1. Placeholder    //灰色内容提示
2. required  //内容不能为空
3. pattern    //

 

placeholder

1. 1. input类型的文本框提供一种提示（hint）
   2. 可以描述文本框期待用户输入何种内容
   3. 提示语默认显示，当文本框中输入内容时提示语消失
   4. 适合于input标签：text、search、url、email和password等类型
2. <input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"  />

文本框输入内容提示

Required

1. 1. 规定文本框填写内容不能为空，否则不允许用户提交表单
   2. 适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
2. <input type="text" name="username"  required  />

必须填

Pattern

1. 1. 用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

 

<input type="text" name="tel"  required   pattern="^1[358]\d{9}"  />

                                                                      验证规则，正则表达式