HTML input 表单

阅读更多

HTML 表单
HTML 表单用于搜集不同类型的用户输入

元素定义 HTML 表单

form elements

实例:(form)

GET（默认方法），向服务器action_page.php文件（页面）提交数据
数据加到URL中,如：action_page.php?firstname=Mickey&lastname=Mouse
URL长度要求（2K）



POST，向服务器action_page.php文件（页面）提交数据
URL 不改变，数据长度无要求
数据在HTTP消息主体中发送



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

type 属性
text:定义常规文本输入
radio:定义单选按钮输入（选择多个选择之一）
submit:定义用于向表单处理程序（form-handler）提交表单的按钮（提交表单）
select:下拉列表
textarea:定义多行输入字段（文本域）
button:定义可点击的按钮
file:文件输入
password:密码字段(与text样，显示为星号或实心圆)
checkbox:复选框(可以选择多个)
number:数字值输入
date:出现一个日期选择的输入
color:出现一个颜色选择器
range:用于应该包含一定范围内的值的输入字段
month:允许用户选择月份和年份
week:允许用户选择周和年
time:允许用户选择时间（无时区）


实例:(radio)

    Male


    Female

radio名字要一样,生成表单数据时为sex=woman或sex=female，
当没有选上时，这个字段为null,就是不会出现在表单数据中


实例:(text)

生成表单数据时为firstName=xing,当然取值为你输入的值,这里只是默认为xing
placeholder用于在没有输入时在输入框中进行提示输入作用
当没有输入值时为“”，表单数据为firstName=


实例:(submit)

value中的值为提交按钮显示的值


实例:(fieldset,legend)

	

		
Personal information:
	First name:

	
	

	Last name:

	
	


	
	

元素组合表单中的相关数据

元素为

元素定义标题。


实例:(select)

	Volvo
	Saab
	Fiat
	Audi

表单数据为cars(name)=volvo(option中的其中一个value)
如果设置multiple表单数据为select=11&select=22


实例:(textarea)

The cat was playing in the garden.

标签之间的内容才是textarea中的显示的内容
表单数据message=The cat was playing in the garden.
当没有输入值时为“”，表单数据为message=
rows定义显示多少行（没有滚动条时），cols（一行显示多少个字符）,这个定义最小高宽
textarea是可以拖动放大的


实例:(button)

Click Me!

onclick是点击时调用的函数（动作）
标签之间的内容为显示在按钮上的内容


实例:(file)

表单数据image2=所选文件名
value是不可以写的，只可以读，读到的内容的文件的路径文件名
当没有输入值时为null,,就是不会出现在表单数据中
onchange事件可以绑定到选择文件后的事件处理


实例:(password)

内容会以星号或实心圆进行显示，但真正内容为你输入的内容


实例:(checkbox)
无value值定义时

	I have a bike


	I have a car

表单数据bike=on,或car=on,或bike=on&car=on,
当没有输入值时为null,,就是不会出现在表单数据中
checked属性为true表示选上，false表示没选上
var chekcOb=$("*[name='menuId']:checked")得到选择上的DOM集合

有value值定义时

	I have a bike


	I have a car

表单数据vehicle=Bike,或vehicle=Car,或vehicle=Bike&vehicle=Car,
当没有输入值时为null,,就是不会出现在表单数据中
checked属性为true表示选上，false表示没选上
var chekcOb=$("*[name='menuId']:checked")得到选择上的DOM集合


实例:(number)(有些浏览器不支持)

实例:(date)(有些浏览器不支持)

出现一个日期选择的输入
表单数据bday=2013-09-28
value为默认显示的日期
当没有输入值时为'',


实例:(color)(有些浏览器不支持)

出现一个颜色选择器
value为默认显示的颜色
当没有输入值时为0


实例:(range)(有些浏览器不支持)

根据浏览器支持，输入字段能够显示为滑块控件
用于应该包含一定范围内的值的输入字段
value为默认值
无value时为中间值


实例:(month)(有些浏览器不支持)

允许用户选择月份和年份。
表单数据bdaymonth=2014-08
value为默认显示的日期
当没有输入值时为'',


实例:(week)(有些浏览器不支持)

允许用户选择周和年
表单数据week_year=2017-W08
value为默认显示的日期
当没有输入值时为'',


实例:(time)(有些浏览器不支持)

允许用户选择时间（无时区）
表单数据week_year=2017-W08
value为默认显示的日期
当没有输入值时为'',



HTML Input 属性
value:属性规定输入字段的初始值。
readonly:属性规定输入字段为只读（不能修改）。
disabled:属性规定输入字段是禁用的。
size：属性规定输入字段的尺寸（以字符计）（输入框长度）。
maxlength:属性规定输入字段允许的最大长度。
required：属性是布尔属性。如果设置，则规定在提交表单之前必须填写输入字段。
step：属性规定 元素的合法数字间隔。如果 step="3"，则合法数字应该是 -3、0、3、6、等等。
placeholder：属性规定用以描述输入字段预期值的提示。
pattern：属性规定用于检查 元素值的正则表达式。
height和width：属性仅用于 。
form：属性规定 元素所属的一个或多个表单，就是这个输入会关联到一个或多个表单中(空格分隔的表单 id 列表)。
       
multiple 属性是布尔属性。如果设置，则规定允许用户在 元素中输入一个以上的值。接受多个值的文件上传字段：
        ，