【html】H3_表单

第三章 表单

表单语法form：

<form  method="post" action="result.html">
   <!--method规定发送表单的方式post/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>

表单元素input格式：

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

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

text的属性值：

文本框text

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

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

密码框password

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

单选按钮radio

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

复选框checkbox

<!--当type取值为checkbox时为复选框，name和value属性是必须的，其他属性并不是必须的。
    name值保持一致-->

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

列表框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>

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

按钮

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

重置按钮：

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

提交按钮：

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

图片按钮：

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

普通按钮：

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

<button>
    普通按钮标签
</button>

多行文本域textarea

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

• 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>

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

邮箱email

<!-- 自动验证Email地址格式是否正确 -->
<p>邮箱：<input type="email" name="email"/></p>
<input type="submit"/>

网址url

<!-- 会自动验证URL地址格式是否正确 -->

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

数字number

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

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

滑块range

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

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

搜索框search

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

隐藏域

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

只读和禁用

 <p>只读：
     <input name="name" type="text" value="张三"  readonly>
</p>
<p>禁用：
    <input type="submit "  disabled   value="保存" >
</p>

表单元素的标注label：

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

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

表单的验证

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

表单验证的好处：

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

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

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

placeholder：文本框输入内容提示

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

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

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

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

pattern:

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

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

正则表达式：

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。

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

总结：