【html】H3_表单

第三章 表单

表单语法form：

<form  method="post" action="result.html">
   
   
        <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>

1
2
3
4
5
6
7
8
9
10
11

表单元素input格式：

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

text的属性值：

文本框text

<input type="text" name="userName" value="用户名" size="30" maxlength="20"/>
       文本框       文本框名称        文本框初始值    长度       文本框可输入最多字符
1
2

• name属性是必须的，其他几个属性并不是必须的，其他几个属性将根据表单需要而设置
• size与maxlength的区别，当没有设置maxlength时向文本框中输入内容没有限制，
• 当设置maxlength时再向文本框中输入值将会有字符数的限制

密码框password

<input type="password" name="password" size="20">
        密码框          密码框的名称  密码框的长度
1
2

单选按钮radio

<input name="XX" type="radio" value="男"  checked/>男
                  单选框按钮      值        单选按钮选中状态
<input name="XX"  type="radio" value="女"  />女
1
2
3

复选框checkbox

<input type="checkbox" name="interest" value="sports"/>运动
        复选框
<input type="checkbox" name="interest" value="talk" checked/>聊天
                                                    选中状态
<input type="checkbox" name="interest" value="play"/>玩游戏


1
2
3
4
5
6
7
8
9
10

列表框select-option

<select name="列表名称" size="行数">
    <option value="0" selected="selected">请选择option >
    <option value="1">选择一option >
    <option value="2">选择二option >
    <option value="3">选择三option >
    <option value="n">………option >
select>

1
2
3
4
5
6
7
8

• name和value属性是必须的，其他属性并不是必须的。
• 一个列表框中只能有一个列表项默认被选中。

按钮

• type=“reset”：重置按钮；type=“submit”：提交按钮；type=“image”：图片按钮；type=“button”：普通按钮
• value=“reset按钮”：按钮上显示的文字
• src=“images/XX.gif”：图片路径

重置按钮：

<input type="reset" name="butReset" value="reset按钮">
1

提交按钮：

<input type="submit" name="Button" value="提交" />
1

图片按钮：

<input type="image" src="images/XX.gif"/>  
1

普通按钮：

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

<button>
    普通按钮标签
button>
1
2
3
4
5

多行文本域textarea

<textarea name="showText" cols="X" rows="y">文本内容textarea>
1

• textarea：多行文本域
• cols=“X” ：显示的列数，double数
• rows=“y”：显示的行数

文件域file（文件图片的上传）

										表单编码属性
<form action="xx.html" method="post" enctype="multipart/form-data">
    <p>
        <input type="file" name="files"/>
                    文本域       
        <input type="submit" name="upload" value="上传"/>
    p>
form>
1
2
3
4
5
6
7
8

强调在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交。

邮箱email

<p>邮箱：<input type="email" name="email"/>p>
<input type="submit"/>
1
2
3

网址url

<p>请输入你的网址：<input type="url" name="userUrl">p>
1
2
3

数字number

<p>请输入数字:
    <input type="number" name="num" min="0" max="100" step="10"/>
p>
1
2
3

• min：允许的最小值
• max：允许的最大值
• step：步长

滑块range

<p>滑块：
    <input type="range" name="range1" min="0" max="10" step="2"/>
p>
<input type="submit"/>

1
2
3
4
5

• range：滑块
• min：允许的最小值
• max：允许的最大值
• step：合法的数字间隔

搜索框search

<p>请输入搜索的关键词：
	<input type="search" name="sousuo"/>
<p>
<input type="submit"/>
1
2
3
4

隐藏域

<input type="hidden" value="666" name="userID" />
           隐藏域
1
2

只读和禁用

 <p>只读：
     <input name="name" type="text" value="张三"  readonly>
p>
<p>禁用：
    <input type="submit "  disabled   value="保存" >
p>
1
2
3
4
5
6

表单元素的标注label：

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

         表单元素的id
<label for="id">标注的文本label>
<input type="radio" name="gender" id="male"/>
                                  表单元素的id
1
2
3
4

表单的验证

​【如果用户填写的表单内容不进行验证就发给服务器，那么服务器发现填写的不合法，或是没有填写，就会返回响应给用户，用户重新填写再提交，如此多次持续直到用户输入正确。它们之间的通信是通过网络进行的，如果网络很差，那么注册一个账号就得花很长时间，对用户来说是非常烦的，对服务器来说也增加了其工作压力。 要是有恶意的用户向服务器发送病毒或是有害于服务器安全的程序就更危险了。】

表单验证的好处：

（1）减轻服务器的压力。

（2）保证数据的可行性和安全性。

在客户端就对表单进行验证是非常有必要的。

placeholder：文本框输入内容提示

<p>placeholder:
	<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>
p>
1
2
3

required：文本框填写内容不能为空

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

语法：
<p>必填项：<input type="text" name="username"  required/>p>
1
2

pattern:

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

<p>验证规则，正则表达式：
    <input type="text" name="tel" pattern="^1[358]\d{9}" required />
p>
1
2
3

正则表达式：

https://baike.baidu.com/item/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1700215

正则表达式通常缩写成“regex”，单数有regexp、regex，复数有regexps、regexes、regexen。

作 用：用来检索、替换那些符合某个模式(规则)的文本

总结：

正则表达式：

https://baike.baidu.com/item/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1700215

正则表达式通常缩写成“regex”，单数有regexp、regex，复数有regexps、regexes、regexen。

作 用：用来检索、替换那些符合某个模式(规则)的文本

总结：