HTML表单全解

一、HTML表单

1、<form>元素

定义收集用户输入的表单:

<form>
..
表单元素
..
</form>

表单元素即不同类型的输入元素,包括文本字段、复选框、单选按钮、提交按钮等。

2、<input>元素

<input>元素是最重要的表单元素,有多种表现形式,通过type属性设定。

Type Description
<input type=”text”> 定义单行文本输入
<input type=”radio”> 定义单元按钮
<input type=”submit”> 定义提交按钮

3、文本输入

<form>
	Firstname:<input type="text" name="firstname">
	<br>
	Lastname:<input type="text" name="lastname">
</form>
Firstname:

Lastname:

注:表单本身是不可见的,可见的是表单元素。文本区域默认宽度20个字符。

4、单选按钮

<form>
	<input type="radio" name="gender" value="Male">Male<br>
	<input type="radio" name="gender" value="Female">Female<br>
	<input type="radio" name="gender" value="Other">Other
</form>
Male
Female
Other

5、提交按钮

<form action="action.php">
	Firstname:<input type="text" name="firstname" value="mike"><br>
	Lastname:<input type="text" name="lastname" value="Nancy"><br>
	<br><input type="submit" value="提交">
</form>
Firstname:
Lastname:

6、action

属性action属性定义表单被提交后执行的动作,在上例中,表单数据被提交给action.php处理。如果action属性缺省,动作将传递给当前页面。7、method属性method属性指定表单提交的HTTP方法(GET 或POST)

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

何时使用GET?

提交数据的默认方法是GET。

但是如果使用GET,那么提交的数据在页面地址字段中是可见的,如下:

/action_page.php?firstname=Mike&lastname=Nancy

 所以GET方法绝不能用来发送敏感数据,GET适合较短的非敏感数据,其数据大小是受限的。

何时使用POST?

如果数据包含敏感的或个人信息时,就应当使用POST方法,POST方法不会在页面地址字段中显示数据。POST无数据大小限制,可用来发送大量数据。

8、Name属性

每个输入段都必须有name属性,如果name属性缺省,该段数据就不会被发送。name属性可看作存储数据的变量名。

9、<fieldset>元素

<fieldset>用来对表单数据进行分组,<legend>元素定义<fieldset>的标题

<form action="action.php">
  <fieldset>
    <legend>Personal Information</legend>
    Firstname:
    <input type="text" name="firstname" value="mike">
    <br>
    Lastname:
    <input type="text" name="lastname" value="Nancy">
    <br>
    <input type="submit" value="提交">
  </fieldset>
</form>
Personal Information

Firstname:

Lastname:

10、一个发送邮件的示例

<h4>发送邮件给icodertop@163.com</h4>
<form action="mailto:icodertop@163.com" method="post" enctype="text/plain">
	姓名:<br>
	<input type="text" name="name"><br>
	邮箱:<br>
	<input type="text" name="email"><br>
	评论:<br>
	<input type="text" name="comment" size="50"><br>
	<br>
	<input type="submit" value="发送">
	<input type="reset" value="重置">
</form>

发送邮件给icodertop@163.com

姓名:

邮箱:

评论:

11、属性总结

Attribute Description
accept-charset 定义表单字符集,默认为当前页面字符集
action 提交地址,默认为当前页面
autocomplete 指定浏览器是否自动完成表单,默认开启
enctype 指定被提交数据的编码,默认为url-encoded
method 指定提交表单使用的HTTP方法,默认为GET
name 制定表单名称,供DOM操作使用:document.forms.name
novalidate 指定浏览器不验证表单
target 指定action属性中的地址打开方式,默认为 _self

二、表单元素

1、<input>元素

见下节。

2、<select>元素(下拉列表)

定义下拉列表:

<form action="action.php">
	<select name="cars">
		<option value="volvo">Volvo</option>
		<option value="saab">Saab</option>
		<option value="fiat">Fiat</option>
		<option value="audi">Audi</option>
	</select>
</form>
列表将默认选择第一项,可使用selected属性自定义默认选项。

<option value="audi" selected>Audi</option>

3、<textarea>元素

定义多行文本输入区域:

<form action="action.php">
	<textarea name="message" rows="10" cols="30">
		The cat was playing in the garden.
	</textarea>
</form>

4、<button>元素

定义一个可点击的按钮:

<button type="button" onClick="alert('Hello World!')">点击</button>

H5新增表单元素

5、<datalist>元素

为<input>元素指定一组预定义列表,以下拉菜单形式呈现,<input>元素的list属性必须与<datalist>的id属性相匹配。

<form action="action.php">
	<input list="browsers">
	<datalist id="browsers">
		<option	value="IE"></option>
		<option value="Firefox"></option>
		<option value="Chrome"></option>
	</datalist>
</form>

6、<keygen>元素

目的是提供一种安全的方式进行用户验证,<keygen>指定了一块密钥对生成器区域,当表单被提交时,生成两个密钥:私有密钥和公有密钥,私有密钥存储在本地,公有密钥将被发送给服务器,公有密钥可用来生成客户端证书以便在将来进行用户验证。

<form action="action.php">
	Username:<input type="text" name="user">
	Encryption:<keygen name="security">
	<input type="submit" value="提交">
</form>

7、<output>元素

用于表示一个计算结果(例如一个脚本的执行结果)

<form action="action.php"  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range" id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
</form>

三、HTML Input类型

1、text类型

单行文本输入区域

2、password类型

密码区域的输入将会呈现星号或圆圈。

3、submit类型

提交按钮

4、reset类型

重置按钮,重置表单中所有内容。

5、radio类型

定义一组单选按钮

6、checkbox类型

定义一组复选框

7、button属性

定义按钮


H5新增input类型

8、color类型

定义一个颜色选择器,IE11及之前版本,Safari 9.1及之前版本不支持。

9、date类型

定义一个年月日选择器,Firefox、IE11及之前版本不支持。

10、datetime-local类型

定义一个日期时间选择器,Firefox、IE12及之前版本不支持。

11、email类型

定义邮箱输入区域,浏览器支持的情况下会自动对输入进行验证。IE9及之前版本不支持。

12、month类型

定义一个年月选择器,Firefox、IE11及之前版本不支持。

13、number类型

定义一个数字输入区域,IE9及之前版本不支持。

14、range类型

定义一个滑块区域用于输入数字,其确切值并不重要的情形下。IE9及之前版本不支持。

15、search类型

定义一块搜索区域

16、tel类型

定义电话号码输入区域,目前只有Safari 8 支持。

17、time类型

定义一个时间选择器。Firefox、IE12及之前版本不支持。

18、url类型

定义一个网址输入区域,浏览器会自动进行验证。IE9及之前版本不支持。

19、week类型

定义一个年周选择器。Firefox、IE11及之前版本不支持。

20、file类型

定义文件选择按钮

21、image类型

定义图片式提交按钮

一个综合示例

<form action="action.php">
  <fieldset>
    <legend>一个综合示例</legend>
    用户名:
    <input type="text" name="username">
    <br>
    密码:
    <input type="password" name="psw">
    <br>
    <input type="radio" name="gender" value="Male" checked>Male<br>
    <input type="radio" name="gender" value="Female">Female<br>
    <input type="radio" name="gender" value="Other">Other<br>
    <input type="checkbox" name="vehicle1" value="bike">Bike<br>
    <input type="checkbox" name="vehicle2" value="car">Car<br>
    <input type="button" onClick="alert('Hello World!')" value="点击此处"><br>
    
    请选择你喜欢的颜色:<input type="color" name="favcolor"><br>
    生日:<input type="date" name="birthday"><br>
    添加时间限制:<input type="date" name="restriction_date" max="2017-5-17" min="1996-8-25"><br>
    预约时间:<input type="datetime-local" name="appointment_time"><br>
    邮箱:<input type="email" name="email"><br>
    年月:<input type="month" name="month"><br>
    数字0-100:<input type="number" name="number" min="0" max="100" step="10" value="50"><br>
    滑块控制条:<input type="range" name="points" min="0" max="100" step="5"><br>
    搜索:<input type="search" name="baidusearch"><br>
    电话:<input type="tel" name="telephone"><br>
    选择时间:<input type="time" name="time"><br>
    主页:<input type="url" name="homepage"><br>
    选择第几周:<input type="week" name="week"><br>
    选择文件:<input type="file" name="img" multiple><br>
    <input type="reset" value="重置">
    <br>
    <input type="submit" value="提交">
  </fieldset>
</form>
一个综合示例

用户名:

密码:


Male

Female

Other


Bike

Car

请选择你喜欢的颜色:

生日:

添加时间限制:

预约时间:

邮箱:

年月:

数字0-100:

滑块控制条:

搜索:

电话:

选择时间:

主页:

选择第几周:

选择文件:

四、HTML input 属性

属性 作用 示例
value 指定初始值 value=”submit”
readonly 输入区域只读 readonly
disabled 禁用该区域 disabled
size 指定区域大小 size=”40″
maxlength 指定最大可输入长度 maxlength=”11″

H5新增属性

属性 作用 示例
 autocomplete  自动填写表单。如果开启,浏览器会根据用户之前填写的内容自动填充表单。可作用于<form>或<input>,可指定整个表单开启自动填充,并指定表单中的某个元素关闭自动填充。 autocomplete=”on”

autocomplete=”off”

 novalidate  指定表单提交时是否进行验证。 novalidate
 autofocus  指定页面加载时某个输入区域自动获取焦点(鼠标点击状态) autofocus
 form  指定一个<input>元素所属的表单(通过id指定) form=”form1″

form=”form1 form2″

 formaction  重写表单的action属性,作用于type值为submit或image的input元素 <input type=”submit” value=”登录”>
<input type=”submit” formaction=”admin.php”
value=”作为管理员登录”>
 formenctype 重写表单数据提交时的编码方式,仅适用于method属性值为post的表单 <input type=”submit” value=”提交”>
<input type=”submit” formenctype=”multipart/form-data”
value=”以Multipart/form-data编码提交”>
 formmethod 重写表单的method属性,用于type值为submit或image的input元素 <input type=”submit” value=”提交”>
<input type=”submit” formmethod=”post” formaction=”action_page_post.asp”
value=”以POST方式提交”>
 formnovalidate 重写表单的validate属性,作用于type为submit的input元素 <input type=”submit” value=”提交”>
<input type=”submit” formnovalidate value=”不验证提交”>
 formtarget 重写表单target属性,用于type值为submit或image的input元素 <input type=”submit” value=”正常提交”>
<input type=”submit” formtarget=”_blank”
value=”提交后在新窗口打开”>

10、height/width属性

指定<input type=”image”>元素的大小:

<input type=image" src="submit.gif" alt="submit" width="48" height="48">

11、list属性

见之前的datalist

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

12、min/max属性

见前

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

13、multiple属性

指定是否允许用户输入多个值,作用于email、file类型

选择文件:<input type="file" name="img" multiple>

14、pattern属性

指定对<input>元素的值进行验证的正则表达式,适用于type类型为text、search、url、tel、Email、password。

可使用title给予用户相关提示。

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

15、placeholder属性

指定输入区域的相关提示,适用于 text、search、url、tel、email、password。IE9及早期版本不支持。

用户名:<input type="text" name="user_name" placeholder="邮箱/手机号码">
用户名:

16、required属性

指定必填区域

用户名:<input type="text" name="user_name" required>
用户名:

17、step属性

设置步长,可与min、max属性协同使用创建一组合法值,适用于number、range、date、datetime-local、month、time、week。

步长为3:<input type="number" name="points" step="3">
步长为3:

 

发帖时间: web