HTML----表单验证

HTML----表单元素

表单

表单语法

<form method = "post" action = "result.html">
    #method:规定如何发送表单数据，常用值：get|post
    #action：表示向何处发送表单数据
    <p>名字：<input name = "name" type = "text"></p>
    <p>密码：<input name = "pass" type = "password"></p>
    <p>
        <input type = "submit" name = "Button" value = "提交"/>
        <input type = "reset" name = "Reset" value = "重填"/>
    </p>
</form>

在实际网页开发中通常采用post方式提交表单数据

表单元素格式

<input type = "text" name = "fname" value = "text"/>
#input:元素类型 name:input元素名称 value: input元素的值

属性	说明
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时，指定按钮是否是被选中

文本框

#语法
<input type = "text" name = "userName" value = "用户名" size = "30" maxlength = "20"/>

密码框

#语法
<input type = "password" name = "pass" size = "20"/>

单选框

#语法
<input name = "gen" type = "radio" value = "男" cheched/>男
<input name = "gen" type = "radio" value = "女"/>女

#checked表示指定按钮被选中

复选框

#语法
<input type = "checkbox" name = "interest" value = "sport"/>运动
<input type = "checkbox" name = "interest" value = "talk" checked/>聊天
<input type = "checkbox" name = "interest" value = "play"/>玩游戏

列表框

#语法
<select name = "列表名称" size = "行数">
    <option value = "选项的值" selected>...</option>
    <option value = "选项的值">...</option>
</select>

#selected 表示默认选中

按钮

重置按钮

<input type = "reset" name = "butRest" value = "reset按钮">

图片按钮

<input type = "image" src = "图片路径">

普通按钮

<input type = "button" name = "butButton" value = "button按钮"/>

多行文本域

#语法
<textarea name = "showText" cols = "x" rows = "y">文本内容</textarea>

#cols：显示的列数 rows: 显示的行数

文件域

#语法
<form action = "" method = "post" enctype = "multipart/form-data">
    <p>
        <input type = "file" name = "files"/>
    	<input type = "submit" name = "upload" value = "上传"/>
        </p>
</form>

#enctype 表单编码属性

邮箱

<p>邮箱：<input tyoe = "email" name = "email"/></p>
<input type = "submit"/>

#它会自动验证Email地址格式是否正确

网址

#语法
<p>
    请输入你的网址：<input type = "url" name = "urlUrl"/>
</p>
<input type = "submit"/>

#它会自动验证URL地址是否正确

数字

#语法
<p>
    请输入数字：<input type = "number" name = "num" min = "0" max = "100" step = "10"/>
</p>
<input type = "submit"/>

#min:允许的最小值  max：允许的最大值 step: 合法的数字间隔

滑块

#语法
<p>
    请输入数字：<input type = "range" name = "range1" min = "0" max = "10" step = "2"/>
</p>
<input type = "submit"/>

搜索框

#语法
<p>
    请输入搜索的关键字:<input type = "search" name = "sousuo"/>
</p>
<input type = "submit"/>

表单的高级应用

隐藏域

#语法
<input type = "hidden" value = "666" name = "userID"/>

只读和禁用

#语法

#只读
<input name = "name" type = "text" value = "张三" readonly/>

#禁用
<input type = "submit" disabled value = "保存"/>

W3C HTML5标准中规定对于布尔类型的属性，属性值可以省略

表单元素的标注

作用

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

#语法
<label for = "id">标注的文本</label>
<input type = "radio" name = "gender" id = "male"/>

表单的初级验证

为什么要进行表单验证？

表单验证的好处

1. 减轻服务器的压力
2. 保证数据的可靠性和安全性

表单验证的方法

placeholder

1. input类型的文本框提供一种提示(hint)
2. 可以描述文本框期待用户输入何种内容
3. 提示语默认显示，当文本框中输入的内容是提示语小时
4. 适合于input标签：text、search、url、email和password等类型

#语法
<input type = "search" name = "sousuo" placeholder = "请输入要搜索的文字"/>

required

1. 规定文本框填写的内容不能为空，否则不允许用户提交表单,表示必填项。
2. 适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

#语法
<input type = "text" name = "username" required/>

pattern

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

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