HTML_表单

一、表单的用途

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

一个表单有三个基本组成部分：

• 表单标签：这包含了处理表单数据所用的URL以及数据提交到服务器的方式。
• 表单域(表单控件)：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
• 表单按钮：包括提交按钮、复位(重置)按钮和一般按钮；用于将数据传送到服务器上或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

二、表单的典型用例

三、表单的基本语法

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。

我们可以使用<from>标签来创建表单

<form action="表单提交地址" method="提交方法">
    … 文本框、按钮等表单元素…
</form>

form表单属性

• action 用于指定提交表单数据的请求URL。
• method 表单数据发送至服务器的方法,常用的有两种 get(默认)/post。

get和post的区别

• 指代不同:

get：从指定的资源请求数据。

post：向指定的资源提交要被处理的数据

• 规则不同:

        get： 请求可被缓存；请求保留在浏览器历史记录中；请求可被收藏为书签；请求不应在处理敏感数据时 使用；请求有长度限制；请求应当用于获取数据。

post：请求不会被缓存；请求不会保留在浏览器历史记录中；不能被收藏为书签；请求对数据长度

没有要求。

• 数据要求不同:

get：当发送数据时，get 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是

2048 个字符）。与 post 相比，**get 的安全性较差，**因为所发送的数据是 URL 的一部分。

post：发送数据无限制。**post 比 get更安全，**因为参数不会被保存在浏览器历史或 web 服务器日志中。

get请求的参数url可见，而post请求的参数url不可见

post请求能发送更多的数据类型（get请求只能发送ASCII字符）

总之：

• get提交：用户输入的信息，显示在地址栏中，不安全，请求内容长度有限制，请求速度快。

比如：京东、百度、淘宝首页的搜索数据，都是get提交

• post提交：用户输入的信息，不会显示在地址栏，安全,请求内容长度无限制(重要数据)，请求速度慢。

比如：用户注册、用户登录，都是post提交

当使用get提交方式时 input的name属性值和提交的信息就会显示在地址栏上面

  <form action="#" method="get">
        用户名：<input type="text" name="username"><br>
        密  码：<input type="password" name="pwd"><br>
        <input type="submit">
  </form>

四、表单控件元素

4.1、表单的输入控件

<input>标签：用来定义输入控件。这个标签非常有用，它可以实现各种各样的表单控件效果。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等

 <form action="" method="get">
        <!-- name可以为表单控件起名，其名称在提交表单时会传输给服务器 -->
        <!-- value可以为文本框赋默认值 -->
        <!-- readonly表示只读 -->
        <!-- required表示该信息必填 和表单域结合可以呈现验证内容 -->
        <!-- disabled表示禁用 在页面中呈现灰色 -->
        <!-- placeholder可以指定文本框输入前的信息提示 -->
     
        <label for="text">*普通文本框： </label><input type="text" name="text" id="text"><br>
     
        <!-- type="password" 表示密码文本框，其输入的内容以密文的形式出现 -->
        *密码文本框： <input type="password" name="password"><br>
     
        <!-- type="number" 表示数字数据库，只允许用户输入数字，小数或者负数 -->
        *数字输入框： <input type="number" name="number"><br>
     
        日期输入框： <input type="date" name="date"><br>
     
        <!-- type="tel" 在移动端会调起数字键盘 -->
        <!-- maxlength="11"表示输入最大的字符数 -->
        电话号码输入框：<input type="tel" name="tel" maxlength="11"><br>
     
        <!-- type="email" 在移动端会显示@ -->
        邮箱输入框： <input type="email" name="email"><br>
     
        <!-- type="radio" 使用name属性可以让单选按钮进行分组 name相同时一次只能选择一个 -->
        <!-- checked表示默认选中 -->
        *单选框：<label><input type="radio" name="sex" value="男" checked>男</label>
        <label><input type="radio" name="sex" value="女">女</label><br>
        *复选框：<input type="checkbox" name="hobby" value="足球">足球
        <input type="checkbox" name="hobby" value="排球">排球
        <input type="checkbox" name="hobby" value="乒乓球">兵乓球<br>
     
        搜索框：<input type="search" name=""><br>
     
        <!-- type="button"在value属性中可以显示按钮的内容 -->
        *普通按钮：<input type="button" value="普通按钮"><br>
     
        <!-- type="submit" 结合(form)表单域实现提交效果
		在表单中 submit 点击之后会自从触发提交行为，会向action指定的地址提交，请求方式为method指         定的方式通常表单提交为post
		-->
        *提交按钮：<input type="submit" value="提交按钮"><br>
     
         <!-- 图片会被当作一个按钮 -->
        <input type="image" src="../02Day/image/华仔.png" height="50">
     
        <!-- reset表示重置按钮，会让表单回到默认值-->
        重置按钮：<input type="reset" value="重置按钮"><br>
     
        <!-- accept属性可以过滤文件 -->
        文件上传框：<input type="file" name="file" accept="img/*"><br>
     
        <!-- 隐藏域在页面不可见，但是可以随着表单一起提交给服务端-->
        隐藏域：<input type="hidden"><br>
     
        <!-- cols相当于width rows相当于heigh -->
        <textarea name="" id="" cols="30" rows="10"></textarea><br>
     
        <!-- selected指定默认选中 -->
        <!-- optgroup可以进行分组 label="理科"属性命名分组的标题 -->
        请选择课程:
        <select name="recouse">
            <optgroup label="理科"></optgroup>
            <option value="高等数学">高等数学</option>
            <option value="离散数学" selected>离散数学</option>
            <option value="线性代数">线性代数</option>
            <option value="概率论">概率论</option>
        </select>
    </form>

4.2、表单的其他控件

4.2.1、<textarea>

定义文本域 (一个多行的输入控件)

文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

缩放设置：

• 禁止缩放：resize: none;
• 水平缩放：resize: horizontal;
• 垂直缩放：resize: vertical;

水平垂直缩放：resize: both;
 

  <!-- cols相当于width rows相当于heigh -->
         文本域：<textarea name="" id="" cols="30" rows="10"></textarea><br>

4.2.2、<label>:

定义了 <input> 元素的标签，一般为输入标题label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

1. 方式一：

• for属性,让标签和指点的input元素建立关联,多数使用在单选或复选
• 给单选或复选后面的文字加入label标签,for属性值是input的id值

1. 方式二：

• 将input元素包含在label标签中
• 如果将input放置在label标签之间,那么for属性就可以不用

注：和单选、复选结合使用，提高用户体验。

 <label for="phone">手机号码</label>
    <input type="tel" name="phone" id="phone">
<br>
    爱好：
			<label><input type="checkbox" name="hobby" value="足球">足球</label>
			<label><input type="checkbox" name="hobby" value="篮球">篮球</label>
			<label><input type="checkbox" name="hobby" value="羽毛球">羽毛球</label>
			<label><input type="checkbox" name="hobby" value="乒乓球">乒乓球</label>

 

4.2.3、<fieldset>、<legend> (了解) 

<fieldset>标签可以将表单内的相关元素分组。

<fieldset>标签会在相关表单元素周围绘制边框。

<legend>元素为 <fieldset>元素定义标题。

		<fieldset>
			<legend>登录框</legend>
			<p>
				<label for="username">用户名：</label><input type="text" name="username" id="username">
			</p>
			<p>
				密码：<input type="password" name="password" placeholder="请输入密码">
			</p>
		</fieldset>

4.2.4、<select>、<option>

<select>定义了下拉选项列表

<option>定义下拉列表中的选项（一个条目）。

size属性用来定义列表中显示的列表项,在select标签设置multiple属性用来定义是否可以多选

selected指定默认选中

  <form action="" method="get">
            <p>
                请选择课程:
                <select name="recourse">
                    <option value="高等数学" selected>高等数学</option>
                    <option value="离散数学">离散数学</option>
                    <option value="高等数学">高等数学</option>
                    <option value="概率论">概率论</option>
                </select>
            </p>
 </form>

<optgroup>: 定义选项组

对列表项进行分组并命名,必须使用该标签的label属性才可以命名;

1、把对应的option标签放在optgroup里面

2、给optgroup添加label属性,用以列表组命名

    <form action="" method="get">
  <!-- selected指定默认选中 -->
    请选择课程:
    <select name="recouse">
         <!-- optgroup可以进行分组 label="理科"属性命名分组的标题 -->
        <optgroup label="理科">
            <option value="高等数学">高等数学</option>
            <option value="离散数学" selected>离散数学</option>
            <option value="线性代数">线性代数</option>
            <option value="概率论">概率论</option>
        </optgroup>
        <optgroup label="文科">
            <option value="语文">语文</option>
            <option value="历史">历史</option>
            <option value="政治">政治</option>
            <option value="地理">地理</option>
        </optgroup>

    </form>

4.2.5、<button>:定义一个点击按钮

在 <button>元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input>元素创建的按钮之间的不同之处。

提示：请始终为 <button>元素规定 type 属性。不同的浏览器对 <button>元素的 type 属性使用不同的默认值。

type属性:可以设置三个值 submit（提交）/reset（重置）/button（自定义按钮）与input元素设置的按钮含义一致

    <form action="" method="get">
        <button type="button">按钮</button> 
        <button type="submit">提交</button>
        <button type="reset">重置</button> 
    </form>

4.3表单元素的属性

    <form action="" method="get">

        <!-- value属性的值在普通文本框里为默认输入的值 -->
        *普通文本框：<input type="text" name="text" value="12345"> <br>

        <!-- readonly为只读，选中时没有光标，不能修改内容 -->
        *普通文本框：<input type="text" name="text" value="12345" readonly> <br>

        <!-- disabled表示禁用 文本框会变灰 无法选中 -->
        *普通文本框：<input type="text" name="text" value="12345" disabled> <br>

        <!-- maxlength="6"表示允许输入的最大字符数是6个 -->
        *普通文本框：<input type="text" name="text" maxlength="6"> <br>

        <!-- checked在单选框和复选框中表示默认选中 -->
        性别：<label><input type="radio" name="sex" value="男" checked>男</label>
        <label><input type="radio" name="sex" value="女">女</label> <br>
        爱好：
        <label><input type="checkbox" name="hobby" value="足球">足球</label>
        <label><input type="checkbox" name="hobby" value="篮球">篮球</label>
        <label><input type="checkbox" name="hobby" value="羽毛球">羽毛球</label>
        <label><input type="checkbox" name="hobby" value="乒乓球" checked>乒乓球</label> <br>

        <!-- selected在下拉框中表示默认选中 -->
        请选择课程:
        <select name="recourse">
            <option value="高等数学">高等数学</option>
            <option value="离散数学">离散数学</option>
            <option value="线性代数" selected>线性代数</option>
            <option value="概率论">概率论</option>
        </select>
    </form>

4.4、重点、要点

重点（标签属性）：

​ 1、我们在表单里面填写的数据，最终以key=value的形式提交给服务器

​ key：表单控件name属性的值

​ value：输入的数据 或 选择的选项

​ 2、单选框和复选框的name属性的值必须保持一致

​ 3、单选框和复选框必须提供value属性，用来作为表单提交的值

​ text文本输入框和passowrd密码框，你输入的内容作为value提交

​ 4、单选框和复选框的默认选中，只需要添加checked属性即可

​ 5、文件上传框可以通过accept属性来限定文件的类型。我们可以通过multiple属性来实现多选。

​ 6、select定义下拉框，option定义下拉框选项，需要给其定义value属性及其值

​ 我们可以通过size属性来控制下拉框显示的数量

​ 通过multiple属性来实现多选

​ 7、下拉框的默认选中，只需要添加selected属性即可

五、HTML5新表单元素

5.1、HTML5 新的 input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证

注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

<body>
	<!--  
				我们通过input标签的type属性，可以实现各种控件效果，H5之前type属性的值：
					text、password、radio、checkbox、file、hidden、submit、reset、button
				新的 input 类型（type的值）:
					email：定义电子邮箱，有简单的校验
					color：拾色器
					日期相关：
						date	定义年月日选择器
						datetime-local	定义年月日时分选择器
						month	定义年月
						week	定义年中的周数
						time	定义时分
					number	定义数值框,有检验
					range	数值滑块
						无论是数值框还是数值滑块，都具有如下三个属性：
							max 最大值
							min 最小值
							step 步长
					search	搜索框
					tel	电话号码框，没有校验
					url	url地址输入框，有简单的校验
			-->

	<form action="">
		<p>
			电子邮箱： <input type="email" name="email">
		</p>


		<p>
			拾色器<input type="color" name="color">
		</p>

		<p>
			年月日: <input type="date" name="date">
		</p>

		<p>
			年月日时分: <input type="datetime-local" name="datetime-local">
		</p>


		<p>
			年月: <input type="month" name="month">
		</p>


		<p>
			年中的周数: <input type="week" name="week">
		</p>

		<p>
			时分: <input type="time" name="time">
		</p>


		<p>
			数值: <input type="number" name="number">
		</p>

		<p>
			数值滑块空间:<input type="range" min="2" max="20" step="3">
		</p>
		<p>
			搜索框: <input type="search" name="search">
		</p>

		<p>
			电话框: <input type="tel" name="tel">
		</p>
		
		<p>
			URL: <input type="url" name="url">
		</p>

		<button type="submit">提交</button>
	</form>
</body>

5.2、HTML5 新的表单属性

5.2.1、*form / input autocomplete 属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

注意: autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, tel, email, password, datepickers, range 以及 color。

HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete )：
 

        <!--  
			在整个表单中，我们在输入框中提交的历史数据，都会自动提示
			
			autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
			关于自动补全，一定是分场景的：
				如果是注册，我们肯定不需要自动补全功能
				如果是登录，用户名可以开启自动补全
				
				如果autocomplete="off"添加给form表单，那么表单里面的所有元素都关闭自动补全
		-->
    <!-- <form action="" autocomplete="off"> -->
        <form action="">
            用户名: <input type="text" name="username" autocomplete="off"> <br>
            密&emsp;码: <input type="password" name="password"><br>
            姓&emsp;名: <input type="text" name="name"><br>
            <button type="submit">提交</button>
        </form>

5.2.2、*form novalidate 属性

novalidate 属性是一个 boolean(布尔) 属性.

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

无需验证提交的表单数据：

    <!-- novalidate提交信息时不会再进行校验 -->
    <form action="#" method="get"  novalidate autocomplete="off">
        邮箱：<input type="email" name="email"><br>
        URL：<input type="url" name="url"><br>
        <button type="submit">提交</button>
    </form>

5.2.3、*input placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

注意: placeholder 属性适用于以下类型的 <input>标签：text, search, url, tel, email 以及 password。

5.2.4、*input required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。

注意:required 属性适用于以下类型的 <input>标签：text, search, url, tel, email, password, date pickers, number, checkbox, radio 以及 file。

5.2.5、input step 属性

step 属性为输入域规定合法的数字间隔。

如果 step=“3”，则合法的数是 -3,0,3,6 等

提示：step 属性可以与 max 和 min 属性创建一个区域值.

**注意：**step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.

5.2.6、input autofocus 属性

autofocus 属性是一个 boolean 属性.

autofocus 属性规定在页面加载时，域自动地获得焦点。

    <!--  
			placeholder 属性提供一种提示（hint），描述输入域所期待的值。
			required 属性规定必须在提交之前填写输入域（不能为空）。
				如果我们使用正则校验，required其实可以不使用。
				这个属性也是重要的，原因是很多框架中还在用这个属性
			step 属性为输入域规定合法的数字间隔。
			autofocus 属性规定在页面加载时，域自动地获得焦点。
		-->

    <form action="">
        用户名: <input type="text" name="username" autocomplete="off" placeholder="请输入用户名"> <br>
        密&emsp;码: <input type="password" name="password" placeholder="请输入密码" autofocus required><br>
        姓&emsp;名: <input type="text" name="name" placeholder="请输入姓名"><br>
        <button type="submit">提交</button>
    </form>

5.2.7、input form 属性

form 属性规定输入域所属的一个或多个表单。

**提示:**如需引用一个以上的表单，请使用空格分隔的列表。

位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分):

<form action="#" id="form1">
    First name: <input type="text" name="fname"><br>
    <input type="submit" value="提交">
</form>

Last name: <input type="text" name="lname" form="form1">

5.2.8、input formaction 属性

formaction 属性用于描述表单提交的URL地址.

formaction 属性会覆盖<form>元素中的action属性.

注意: formaction 属性用于 type=“submit” 和 type=“image”.

以下HTMLform表单包含了两个不同地址的提交按钮：

<form action="demo-form.php">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交"><br>
    <input type="submit" formaction="demo-admin.php"
           value="提交">
</form>

5.2.9、input formenctype 属性

formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单)

formenctype 属性覆盖 form 元素的 enctype 属性。

注意: 该属性与 type=“submit” 和 type=“image” 配合使用。

第一个提交按钮已默认编码发送表单数据，第二个提交按钮以 “multipart/form-data” 编码格式发送表单数据:
 

<form action="demo-post_enctype.php" method="post">
    First name: <input type="text" name="fname"><br>
    <input type="submit" value="提交">
    <input type="submit" formenctype="multipart/form-data"
           value="以 Multipart/form-data 提交">
</form>

5.2.10、input formmethod 属性

formmethod 属性定义了表单提交的方式。

formmethod 属性覆盖了 <form>元素的 method 属性。

注意: 该属性可以与 type=“submit” 和 type=“image” 配合使用。

重新定义表单提交方式实例:
 

<form action="demo-form.php" method="get">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
    <input type="submit" formmethod="post" formaction="demo-post.php"
           value="使用 POST 提交">
</form>

5.2.11、input formnovalidate 属性

novalidate 属性是一个 boolean 属性.

novalidate属性描述了 <input> 元素在表单提交时无需被验证。

formnovalidate 属性会覆盖 <form> 元素的novalidate属性.

注意: formnovalidate 属性与 type=“submit” 一起使用

两个提交按钮的表单(使用与不适用验证 ):

<form action="demo-form.php">
    E-mail: <input type="email" name="userid"><br>
    <input type="submit" value="提交"><br>
    <input type="submit" formnovalidate value="不验证提交">
</form>

5.2.12、*input height 和 width 属性

height 和 width 属性规定用于 image 类型的 <input>标签的图像高度和宽度。

注意: height 和 width 属性只适用于 image 类型的<input>标签。

提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 （尽管图片已加载）。

定义了一个图像提交按钮, 使用了 height 和 width 属性:

    <!-- input height 和 width 属性
    注意: height 和 width 属性只适用于 image 类型的<input>标签。 -->
    <form action="#">
        <input type="image" src="../images/login.png" width="100" height="50">
    </form>

5.2.13、*input list 属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

    <!-- 
			datalist：规定输入域的选项列表。必须和input输入框结合使用
				input标签的list属性值 和 datalist的id属性值保持一致
				列表项是由option来定义的
				当我们在input输入框输入内容的时候，它会匹配数据列表中的列表项。由option的value来进行匹配。
		-->

    <input type=“text” name=”data” list=”dlist”>
    <datalist id=”dlist”>
        <option value="CAD">CAD制图是一款制图软件，设计人员利用计算机及其图形设备进行设计工作</option>
        <option value="HTML5">HTML5是构建Web内容的一种语言描述方式。</option>
        <option value="JAVASCRIPT">JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。</option>
        <option value=".NET">.NET是一种用于构建多种应用的免费开源开发平台，</option>
        <option value="JAVA">Java 是一个通用术语，用于表示 Java 软件及其组件</option>
    </datalist>

5.2.14、input multiple 属性

multiple 属性是一个 boolean 属性.

multiple 属性规定<input>元素中可选择多个值。

注意: multiple 属性适用于以下类型的 <input>标签： file

    <form action="#">
       <input type="file" name="file" multiple><br>
        <input type="submit">
    </form>

5.2.15、*input pattern 属性

pattern 属性描述了一个正则表达式用于验证 <input>元素的值。

注意:pattern 属性适用于以下类型的 <input>标签: text, search, url, tel, email, 和 password.

提示： 是用来全局 title 属性描述了模式.

提示： 在我们的 JavaScript 教程中学习到有关正则表达式的内容

    <!-- input pattern 属性
    pattern 属性描述了一个正则表达式用于验证 <input>元素的值。 -->
    <form action="#">
        <input type="tel" name="phone" pattern="^(1[3456789])\d{9}$" title="请输入正确的手机号"><br>
         <input type="submit">
     </form>

5.2.16、*input min 和 max 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

注意: min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。

<input> 元素最小值与最大值设置:

    <!-- input min 和 max 属性
    min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。 -->
    <form action="#">
        <input type="date" min="1940-10-01">
         <input type="submit">
     </form>