HTML input 表单

HTML表单

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

<form>元素定义HTML表单

<form>

formelements

</form>

实例:(form)

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

GET（默认方法），向服务器action_page.php文件（页面）提交数据

数据加到URL中,如：action_page.php?firstname=Mickey&lastname=Mouse

URL长度要求（2K）

<formaction="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=Thecatwasplayinginthegarden.

当没有输入值时为“”，表单数据为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表示没选上

varchekcOb=$("*[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表示没选上

varchekcOb=$("*[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为默认显示的日期

当没有输入值时为'',

HTMLInput属性

value:属性规定输入字段的初始值。<inputtype="text"name="firstname"value="John">

readonly:属性规定输入字段为只读（不能修改）。<inputtype="text"name="firstname"value="John"readonly>

disabled:属性规定输入字段是禁用的。<inputtype="text"name="firstname"value="John"disabled>

size：属性规定输入字段的尺寸（以字符计）（输入框长度）。<inputtype="text"name="firstname"value="John"size="40">

maxlength:属性规定输入字段允许的最大长度。<inputtype="text"name="firstname"maxlength="10">

required：属性是布尔属性。如果设置，则规定在提交表单之前必须填写输入字段。<inputtype="text"name="usrname"required>

step：属性规定<input>元素的合法数字间隔。如果step="3"，则合法数字应该是-3、0、3、6、等等。

placeholder：属性规定用以描述输入字段预期值的提示。<inputtype="text"name="fname"placeholder="Firstname">

pattern：属性规定用于检查<input>元素值的正则表达式。<inputtype="text"name="code"pattern="[A-Za-z]{3}"title="Three">

height和width：属性仅用于<inputtype="image">。<inputtype="image"src="img.gif"alt="Submit"width="48"height="48">

form：属性规定<input>元素所属的一个或多个表单，就是这个输入会关联到一个或多个表单中(空格分隔的表单id列表)。

<inputtype="text"name="lname"form="form1">

multiple属性是布尔属性。如果设置，则规定允许用户在<input>元素中输入一个以上的值。接受多个值的文件上传字段：

<inputtype="file"name="img"multiple>，