HTML 表单标签

一、什么是表单标签

表单是用来采集用户的输入数据，然后将数据提交给服务器

---

二、表单的组成

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

①表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。

②表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

③表单按钮：包括提交按钮、复位按钮和一般按钮；

---

三、表单标签

表单标签＜form＞＜/form＞

功能：用于申明表单，定义采集数据的范围，也就是＜form＞和＜/form＞里面包含的数据将被提交到服务器语法：

>form>

  action=“”  服务器地址

  method=“”  get  /  post          

1.Action 属性

    action=“”  数据提交的路径     服务器地址

action 属性定义在提交表单时执行的动作，向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到 web 服务器上的网页。

如果省略 action 属性，则 action 会被设置为当前页面。

---

2.method 

 method=“”    方式  方法  数据提交的方式

method 属性规定在提交表单时所用的方法（GET 或 POST）：

①什么时候使用 GET？

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

1.当您使用 GET 时，表单数据在页面地址栏中是可见的，安全性较低

http://127.0.0.1:8848/lianxi/03%E8%A1%A8%E5%8D%95.html?usernamme=fds&pwd=123&tj=%E6%8F%90%E4%BA%A4%E6%8C%89%E9%92%AE

2.GET 最适合少量数据的提交。浏览器会设定容量限制。

3.get方式可能获取的数据是浏览器里的缓存信息

②什么时候使用 POST？

如果表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。

3.Target 属性

target 属性规定提交表单后在何处显示响应。

target 属性可设置以下值之一：

值	描述
_blank	响应显示在新窗口或选项卡中。
_self	响应显示在当前窗口中。
_parent	响应显示在父框架中。
_top	响应显示在窗口的整个 body 中。
framename	响应显示在命名的 iframe 中。

默认值为 _self，这意味着响应将在当前窗口中打开。

四、表单域对象

表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等，用于采集用户的输入或选择的数据

元素

 元素是最重要的表单元素。

元素有很多形态，根据不同的 type 属性。

1.   文本框 

		用户名/密码

		

定义常规文本输入，定义常规文本输入

---

2.多行文本框

  The cat was playing in the garden.
  


  

元素定义多行输入字段（文本域）

 行内块元素
rows  行数
cols   列数
style="resize：none"  不修改文本域大小

---

3.复选框

pingguo
juzi

复选框允许用户在有限数量的选项中选择零个或多个选项 

  行内元素
    将复选框用label包起来，可以实现点文字就选择选框的效果

                苹果
                

label包住文本，通过label的属性for与复选框的id值进行联系，实现效果

 
            橙子

---

checked

复选框默认被选中，添加 checked="checked" 或者  直接写checked

---

    4. 密码框

User name:




User password:

password 字段中的字符会被做掩码处理（显示为星号或实心圆）。 

---

5.    单选框

Male


Female
 

 必须写上相同的name值才能每次选中一个

 单选框也可以用默认属性checked

---

 6. 文件上传框

访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。

＜input type="file" name="..." size="15" maxlength="100"＞

 

在input里加入multiple属性可以多选文件，默认只能选一个 

---

 7.下拉选择框

apple pear watermelon banana

 元素定义待选择的选项。

列表通常会把首个选项显示为被选选项。

下拉选择框默认被选中  在里添加selected="selected"  或者是selected

里的value值可以不写，写value的话value要有值，否则提交为空

加mutiple可以多选（用得少）

---

8.number  数字

  数量（1 到 5 之间）：
  
  

9.color 颜色

 用于应该包含颜色的输入字段。

  Select your favorite color:
  

10.range

 用于应该包含一定范围内的值的输入字段，输入字段能够显示为滑块控件。

可以使用如下属性来规定限制：min、max、step、value。

---

11.month

 允许用户选择月份和年份。

  Birthday (month and year):
  

---

12.week

 允许用户选择周和年。

  Select a week:
  

---

13.time

 允许用户选择时间（无时区）。

  Select a time:
  

---

14.datetime

 允许用户选择日期和时间（有时区）

  Birthday (date and time):
  

15.datetime-local

 允许用户选择日期和时间（无时区）。

  Birthday (date and time):
  

16.：email

 用于应该包含电子邮件地址的输入字段。

能够在被提交时自动对电子邮件地址进行验证。

  E-mail:
  

---

17.search

 用于搜索字段（搜索字段的表现类似常规文本字段）。

  Search Google:
  

---

18.tel

 用于应该包含电话号码的输入字段。

目前只有 Safari 8 支持 tel 类型。

  Telephone:
  

---

19.：url

 用于应该包含 URL 地址的输入字段。

  Add your homepage:
  

---

五、input的属性

1.value 属性

value 属性规定输入字段的初始值：

 First name:




 Last name:


 

2.readonly 属性

readonly 属性规定输入字段为只读（不能修改）：

 First name:




 Last name:


 

readonly 属性不需要值。它等同于 readonly="readonly"。 

---

3.disabled 属性

disabled 属性规定输入字段是禁用的,被禁用的元素是不可用和不可点击的,被禁用的元素不会被提交。

 First name:




 Last name:


 

disabled 属性不需要值。它等同于 disabled="disabled"。

---

4.size 属性

size 属性规定输入字段的尺寸（以字符计）：

 First name:




 Last name:


 

5.maxlength 属性

maxlength 属性规定输入字段允许的最大长度：

 First name:




 Last name:


 

设置 maxlength 属性，则输入不会超过所允许数的字符。

---

6.autofocus 属性

autofocus 属性是布尔属性。规定当页面加载时 元素应该自动获得焦点。

使 "First name" 输入字段在页面加载时自动获得焦点：

​
First name:

​

---

7.height 和 width 属性

height 和 width 属性规定 元素的高度和宽度。

height 和 width 属性仅用于 。

把图像定义为提交按钮，并设置 height 和 width 属性：

---

8.placeholder 属性

placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。

该提示会在用户输入值之前显示在输入字段中。

placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。

---

9.required 属性

required 属性是布尔属性。

如果设置，则规定在提交表单之前必须填写输入字段。

required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.

六、表单按钮

  1.  提交按钮

＜input type="submit" name="..." value="..."＞

---

2. 重置按钮

 ＜input type="reset" name="..." value="..."＞

---

  3.一般按钮

＜input type="button" name="..." value="..."  οnclick="..."＞
            没有功能，需要通过脚本添加效果

  4. 图片按钮
         >

---

案例一

	
		
		
		
	
	
		收货地址
		

			

				

			
			

				
收货人
				
所在地区
				
详细地址
				
邮政编码
				
电话/手机
				
相关操作
			
			

				
小张
				
河南省 郑州市
				
二七区兴华南街169号宏鑫花园
				
450000
				
18736088510 
0371-60808016
				
编辑 ▏默认地址
			
		
		

			
			新增电话（办公电话，家庭电话和移动电话至少填一个，其他均为必填，最多可添加5个地址
		
		

			 收货人：


			  地区：
				河南省
				河北省
				江苏省
				山东省
			
			
				郑州市
				石家庄市
				无锡市
				菏泽市

			


			详细地址：


			邮政编码：


			移动电话：


			办公电话：


			家庭电话：


			送货时间：
			
				送货时间不限
				不送了
				太多了
				不干了

			



			      
		
		
	

案例二

	
		
		
		
	
	
		

			

				
 
				
▪
				
用户名密码登录
				
 

				
×
			
			

				


				
			
			

				

					

						
					

				
			
			

				



				
			
			

				

					

				
			
			

				

					

						
					
				

			
			

				
    忘记密码？
				
			
			

				

					


				
			
			

				


					  扫码登录
					   ▏
					
					
					
					
						
							    立即注册

				
			
		

	

案例三

	
		
		

	
	
		
小明的报名表
		用户名：
		

			
		

		密码：
		


			
		

		确认密码:
		


			
		

		爱好:

		



			唱歌
			跳舞
			游泳
			看书
			玩手机
		
		性别

		

			男
			女
			保密
		
		

		上传照片

		

			
		

		学历
		

			
				博士
				硕士
				研究生
				本科
				专科
				高中
			
		

		个人签名

		

			
		

		

			
			
			
		


	

 案例四

	
		
		
	
	
		

			

				

					


						
					
				
				
商品
				
颜色/尺码
				
数量
				
售价
				
优惠
				
成交价小计
				
状态
				
操作
			
			

				

					


						
					
				
				

				
丹宁族
160/66A
				

					

						
						
						
					
				
				
¥119.00
				
¥0.00促销优惠
				
¥119.00
				
有货
				
加入收藏夹▏删除
修改优惠
			
			

				

					


						全选 删除选中商品
					
已选商品1件

					商品总价：¥119.0优惠¥0.00

					合计（不含运费）：¥119.00


继续购物