HTML input 表单

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


<form> 元素定义 HTML 表单
<form>
form elements
</form>

实例:(form)

<form action="action_page.php" method="GET">

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

<form action="action_page.php" method="POST">

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



<input> 元素
<input> 元素是最重要的表单元素。

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


实例:(radio)

<form>
    <input type="radio" name="sex" value="male" checked>Male
<br>
    <input type="radio" name="sex" value="female">Female
</form>

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


实例:(text)

<input type="text" name="firstName" required placeholder="first name" value="xing">

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


实例:(submit)

<input type="submit" value="Submit">

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


实例:(fieldset,legend)

<form action="action_page.php">
	<fieldset>
		<legend>Personal information:</legend>
	First name:<br>
	<input type="text" name="firstname" value="Mickey">
	<br>
	Last name:<br>
	<input type="text" name="lastname" value="Mouse">
	<br><br>
	<input type="submit" value="Submit">
	</fieldset>
</form>

<fieldset> 元素组合表单中的相关数据
<legend> 元素为 <fieldset> 元素定义标题。


实例:(select)

<select name="cars">
	<option value="volvo">Volvo</option>
	<option value="saab">Saab</option>
	<option value="fiat">Fiat</option>
	<option value="audi">Audi</option>
</select>

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


实例:(textarea)

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

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


实例:(button)

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

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


实例:(file)

<button><input type="file" name="image2" value="image"></button>

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


实例:(password)

<input type="password" name="psw">

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


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

<form>
	<input type="checkbox" name="bike" >I have a bike
<br>
	<input type="checkbox" name="car">I have a car
</form>

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

有value值定义时

<form>
	<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
	<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

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


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

<input type="number" name="quantity" min="1" max="5">

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

<input type="date" name="bday" value="2000-01-02">

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


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

<input type="color" name="favcolor" value="#ff0000">

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


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

<input type="range" name="points" min="0" max="10" value="3">

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


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

<input type="month" name="bdaymonth" value="2014-08">

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


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

<input type="week" name="week_year" value="2017-W08">

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


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

<input type="time" name="usr_time" value="03:08">

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



HTML Input 属性
value:属性规定输入字段的初始值。<input type="text" name="firstname" value="John">
readonly:属性规定输入字段为只读（不能修改）。<input type="text" name="firstname" value="John" readonly>
disabled:属性规定输入字段是禁用的。<input type="text" name="firstname" value="John" disabled>
size：属性规定输入字段的尺寸（以字符计）（输入框长度）。<input type="text" name="firstname" value="John" size="40">
maxlength:属性规定输入字段允许的最大长度。<input type="text" name="firstname" maxlength="10">
required：属性是布尔属性。如果设置，则规定在提交表单之前必须填写输入字段。<input type="text" name="usrname" required>
step：属性规定 <input> 元素的合法数字间隔。如果 step="3"，则合法数字应该是 -3、0、3、6、等等。
placeholder：属性规定用以描述输入字段预期值的提示。<input type="text" name="fname" placeholder="First name">
pattern：属性规定用于检查 <input> 元素值的正则表达式。<input type="text" name="code" pattern="[A-Za-z]{3}" title="Three">
height和width：属性仅用于 <input type="image">。<input type="image" src="img.gif" alt="Submit" width="48" height="48">
form：属性规定 <input> 元素所属的一个或多个表单，就是这个输入会关联到一个或多个表单中(空格分隔的表单 id 列表)。
        <input type="text" name="lname" form="form1">
multiple 属性是布尔属性。如果设置，则规定允许用户在 <input> 元素中输入一个以上的值。接受多个值的文件上传字段：
        <input type="file" name="img" multiple>，