HTML5基础 | (4)HTML常用表单元素和HTML5新增表单元素介绍

目录

1.什么是表单？

2.表单组成部分

3.表单标签form

4.表单域input

5.文本域textarea

6.表单元素描述标签label

7.表单元素分组标签fieldset

8.HTML5新增表单属性

9.HTML5新增表单类型

10.HTML表单总结

 

---

1.什么是表单？

表单是网页中数据采集的工具。

2.表单组成部分

3.表单标签form

• 属性

序号	属性名称	描述
1	name	表单名称
2	action	当表单提交时向何处发送表单数据
3	target	在何处打开action属性的url，_blank新窗口，_self当前窗口
4	method	get:通过url地址传送参数到服务器；post：后台传送到服务器
5	enctype	发送前如何将数据进行编码，仅与method="post"配对使用
6	application/x-www-form-urlencoded	默认值，发送前对所有字符进行编码:空格转+号，特殊字符转ASCII 16进制值
7	mutipart/form-data	不对发送字符进行编码，在上传文件时，必须设置
8	text/plain	纯文本方式，仅将空格转为"+"号，不对特殊字符编码

• 语法

最常用的就是name，action，method三个属性，必须牢记。

4.表单域input

• 属性

序号	属性名称	描述
1	type	元素的类型，如text文本框、radio单选、select下拉框等
2	name	元素的名称，主要用与服务器端数据传送
3	value	元素的默认值，可当占位符
4	size	以字符计算的元素可见宽度，注意，不是像素或百分比
5	maxlength	元素允许的最大字符长度
6	disabled	禁用该控件，此时，既不能选择，也不能点击
7	readonly	该控件字段内容只读，不允许修改

• 语法举例

是单标签，结尾不需要封闭，这与xhtml不同。xhtml要求所有标签都要封闭：

  
  
  
  


  
    
    姓名：
  

网页显示效果：

• type属性值

序号	属性值名称	描述
1	text	单行文本框，默认20个字符
2	password	密码框，与text类型很相似，区别是字符非明文，以*号代替
3	radio	单选按钮，name值必须相同，checked为默认值
4	checkbox	复选框，name值必须相同，返回数组，checked为默认值
5	button	自定义按钮，多与JavaScript配合使用
6	submit	提交按钮，向服务器发送数据，value是按钮上的文字
7	reset	重置按钮，将当前表单所有控件中的值恢复到默认值
8	file	文件上传按钮，multiple允许批量上传，与multipart/form-data配对
9	image	设置图像为提交按钮，必须放在 中，src为源，alt为说明
10	hidden	通常用于向服务器传送预设值或者由JavaScript处理

• type类型实例

(1)单行文本：

(2)密码字段：

(3)单选按钮:

(4)复选框:

(5)自定义按钮:

(6)提交按钮:

(7)重置按钮：

(8)文件上传:

(9)图像按钮:

(10)隐藏字段：

  
  
  
  




  姓名：
  
  密码：
  

  
  性别：男
  女
  

  
  爱好：旅游
  唱歌
  下棋
  打游戏
  

  
  
  
  
  
  
  
  
  
  

网页显示效果：

网页显示效果：

• 下拉框与分组

  
  
  
  






  合肥市
  长丰县
  肥西县
  肥东县
  庐江县
  巢湖市



  
    包河区
    庐阳区
    瑶海区
    蜀山区
  
  
    合肥市
    长丰县
    肥西县
    肥东县
    庐江县
    巢湖市

  

网页显示效果：

5.文本域textarea

  
  
  
  




  请留言：
  

网页显示效果：

6.表单元素描述标签label

用于对控制内容进行说明：如用户名，密码等

（1）格式一

优点：与同级，适合表格布局      缺点：必须要有id属性与的for属性关联

（2）格式二

优点：代码更加紧凑，适合

布局             缺点：是父标签，增加了层级

  
  
  
  






姓名：



姓名：

网页显示效果：

7.表单元素分组标签fieldset

 

  
  
  
  




  

    
基本信息
    

      用户名称
      
    
    

      用户密码
      
    
    

      电子邮箱
      
    
  

网页显示效果：

8.HTML5新增表单属性

• 新增属性表

序号	属性名称	描述
1	placeholder	占位符，类似于value属性，设置默认值可提示信息
2	autofocus	自动焦点，页面渲染时自动获取焦点
3	required	必填项，如果为空则无法提交并将焦点自动定位在上面
4	pattern	对输入内容进行正则验证
5	list	限定输入内容的列表，列表由
6	height和width	input类型为图像时，设置图像的宽高
7	min、max和step	input类型为数字或日期类型时，设置取值范围与步长（间隔）
8	novalidate	用在 中，提交时不对数据进行验证

• 新增属性实例

  
  
  
  




  
  姓名：
  
  

  姓名：
  
  

  年龄：
  
  

  

网页显示效果：

  
  
  
  





  国家代码：
  
  

网页显示效果：

  
  
  
  




  搜索：
  
  

网页显示效果：

  
  
  
  




    工资：
    
    

网页显示效果：

  
  
  
  






  国家代码：
  
  

网页显示效果：

9.HTML5新增表单类型

• 新增表单类型

序号	属性名称	描述
1	number	仅限数值型数据，可设置区间范围与步长增量：1988
2	date	仅限日期型数据，可设置区间范围与步长增量： 2017-03-22
3	time	仅限时间型数据，可设置区间范围与步长增量：22:34
4	email	限定必须输入电子邮箱地址，如***@***
5	search	不限定内容，当有内容时，控件尾部有一个：取消符号
6	url	限定必须是以http://或https://开头的合法的url地址
7	color	自动打开系统的色板或拾色器，进行颜色选择

• 新增表单类型实例

效果：

  
  
  
  




   年龄：
   
   

   出生日期：
   
   

   上课时间
   

网页显示效果：

  
  
  
  




   

     电子邮箱:
     
   
  

    请输入搜索关键字：
    
  
  

    网站地址：
    
  
  

 

10.HTML表单总结

表单是网页获取用户数据的重要手段，也是影响网站安全的重要入口，因此，设计一个安全可靠并且人性化的表单，是web开发人员必备的基本技能～～