`<input/>`

<input>标签用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。XHTML需要围堵。

属性	值	描述
accept	mime_type	规定通过文件上传来提交的文件的类型。accept 属性仅适用于 `<input type="file">`。需规定多个值，请使用逗号分隔（比如`<input accept="audio/,video/,image/*" />`）。
alt	text	定义无法查看图像时的替代文本。 (只针对type=“image”)
autocomplete	on off	`<input>`输入时，是否基于之前键入过的值，启用文本填充提示，需要与name属性结合使用。可用type：text、search、url、tel、email、password、datepickers、range 和 color
autofocus	autofocus	页面加载时 `<input>`元素应该自动获得焦点
checked	checked	页面加载时应该被预先选定的 `<input>`元素。 (只针对 type=“checkbox” 或者 type=“radio”)
disabled	disabled	定义禁用的 `<input>` 元素
form	form_id	定义 `<input>`所属的一个或多个表单
formaction	URL	当表单提交时，处理输入控件的文件的 URL。(只针对 type=“submit” 和 type=“image”，会覆盖外层`<form>` 的 action 属性)
formmethod	get post	定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type=“submit” 和 type=“image”)
formnovalidate	formnovalidate	布尔属性,当表单提交时不进行验证。formnovalidate 属性覆盖 `<form>` 元素的 novalidate 属性，与 type=“submit” 配合使用。
formtarget	_blank _self _parent _top framename	规定表示提交表单后，在哪里显示接收到响应的名称或关键词
height	pixels	定义`<input>`元素的高度。(只针对type=“image”)
width	pixels	定义`<input>`元素的宽度。(只针对type=“image”)
list	datalist_id	引用 `<datalist>` 元素，其中包含 `<input>` 元素的预定义选项
max	number date	`<input>` 元素的最大值，max 和 min 属性适用于以下 input 类型：number、range、date、datetime、datetime-local、month、time 和 week。
min	number date	`<input>`元素的最小值。max 属性与 min 属性配合使用，可创建合法值范围。
name	text	`<input>` 元素的名称。在 JavaScript 中引用元素，或者在表单提交后引用表单数据。(PS：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值)。
placeholder	text	显示提示信息，不是value值，适用的 input 类型：text、search、url、tel、email 和 password
value	value	定义input 元素的值，即预定义的值。 `1、`"button", “reset”, “submit”：按钮上的文本；`2、`“text”, “password”, “hidden”,“number”,“color”(16进制#000000) ：初始（默认）值；`3、`"checkbox"(必需), “radio”(必需), “image” 类型 - 定义与 input 元素相关的值。该值会发送到表单的 action URL。
—	—	value 属性不适用于 `<input type="file">`。
required	required	规定必需
size	number	规定以字符数计的 `<input>` 元素的可见宽度，适用的 input 类型：text、search、tel、url、email 和 password；type为color时，其方框通过style中的width和height来限定，size对color无效
src	URL	src 属性对于 `<input type="image">`是必需的属性，且只能与 `<input type="image">` 配合使用。
maxlength	number	允许输入的最大字符数，对type="number"无效
multiple	multiple	布尔属性，允许用户输入到元素的多个值，multiple 属性适用于以下 input 类型：email 和 file
readonly	multiple	布尔属性，定义输入字段只读，但可用 tab 键切换到该字段，可以选中或拷贝其文本，readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。
step	number	定义`<input>` 元素的合法数字间隔，适用input 类型：number、range、date、datetime、datetime-local、month、time 和 week

//accept 在mac系统选择文件中不会提示文件格式
<form>
   //选择文件时依然可以选择非gif格式，因此尽量在服务器上对*文件上传*进行验证accept用于文件选择的提示作用。
   <input type="file" accept="image/gif"/><br /> 
   <input type="submit" />
</form>

//alt 无法查看图像时的替代文本loading…
<input type="image" src="img/reg.gif" alt="loading…" style="margin: 90px;" alt="loading"/>

//autocomplete 
<form action="index.html" >
	<input type="text" autocomplete="on" /> //没有name属性，不会弹出填充提示
 	<input type="text"  name="text_1" autocomplete="on"/>	
  	<input type="search" autocomplete="on"/>
 	<input type="submit"/>
</form>
<form action="index.html" autocomplete="on">
	First name:<input type="text" name="fname"><br>//外层定义了autocomplete，内部对应的要加上name属性
	Last name: <input type="text" name="lname"><br>
	E-mail: <input type="email" name="email" autocomplete="off"><br>
	<input type="submit">
</form>

//autofocus
<form action="index.html">
  First name: <input type="text" name="fname" autofocus><br>//只要定义就触发
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>

//checked  用于单选框
<label style="font-family: songti;" for="biye">毕业：</label>
<input type="radio" checked="checked" name="tap2" id="biye"><br>
<label style="font-family: 微软雅黑;" for="weibiye">未毕业：</label>
<input type="radio" value="123" name="tap2" id="weibiye"><br />
//checked  用于复选框
<label style="font-family: songti;" for="yiji">一级</label>
<input type="checkbox" id="yiji"/><br/>
<label style="font-family: songti;" for="erji">二级</label>
<input type="checkbox" id="erji"/><br />
<label style="font-family: songti;" for="sanji">三级</label>
<input type="checkbox"  hidden="" id="sanji"/><br/>
<label style="font-family: songti; " for="" checked="">四级</label>
<input type="checkbox" checked=""/><br />

//disabled
<form action="index.html">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname" disabled><br>//只要定义，就触发
<input type="submit" value="提交">

//form ie不兼容
<form action="index.html" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>
Last name: <input type="text" name="lname" form="form1"> //表单提交时，依然能够提交lname

//formaction 重定义跳转url
<form action="chart.html">
	First name: <input type="text" name="fname"><br>
	Last name: <input type="text" name="lname"><br>
	<input type="submit" value="提1交"><br>
	<input type="submit" formaction="index2.html" value="提s交">
</form>
//绝对 URL - 某个页面的完整地址（比如 href="http://www.example.com/formresult.html"）
//相对 URL - 指向当前站点内的一个文件（比如 href="formresult.html"）

//formmethod
//get：表单数据（form-data）以名称/值对的形式附加到URL(demo-form.php)中,在浏览器的地址栏中可见到(安全性低):demo-form.php?fname=&lname=
<form action="demo-form.php" method="get">
	First name: <input type="text" name="fname"><br>
	Last name: <input type="text" name="lname"><br>
	<input type="submit" value="提交">
	//post：HTTP post 事务的形式发送表单数据（form-data）,在浏览器不可见传参(安全性低):demo-post.php
	<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>

//formnovalidate 只要定义就触发，不写出来就是没有定义
<form action="chart.html">
	<input type="email" name="mail" id="mail" required=""/>
	<input type="submit" value="不验证" formnovalidate /> //不验证表单：不会出现上面的input框的邮箱格式和必须输入的提示
	<input type="submit" value="验证" /> //验证表单：会出现格式和必须输入的提示
</form>

//formtarget
<form action="index.html">
	First name: <input type="text" name="fname"><br>
	Last name: <input type="text" name="lname"><br>
	<input type="submit" value="正常提交">
	<input type="submit" formtarget="_blank" value="新的页面打开">
</form>

//width height 
<form action="http://www.baidu.com" name="表单" target="_blank">
<fieldset style="width: 100px;height: 400px;">
	<legend style="font-family: STkaiti;text-align: center;">个人信息</legend>
	<center><input type="submit" src="http://www.baidu.com" value="开始填写"></center>
	<input type="text" placeholder="请填写学历……">
	<input type="text" placeholder="请填写专业……" required="required"/>
	<button type="submit" value="确认">确认</button>
</fieldset>
//input image 作用等同submit，但会触发两次提交作用，尽量使用submit
<input type="image" name="image" id="image" value="pic" width="48" height="48"/>
</form>

相关标签<datalist></datalist>
<datalist> 标签规定了 <input> 元素可能的选项列表，为<input> 元素提供"选项填充提示"的特性，下拉列表里选项是预先定义好的，作为用户的输入数据。 <input>元素通过 list 属性来绑定 <datalist> 标签，在<datalist>里面定义id值来绑定。

//list 
<form action="index.html">
	<input type="text" list="down" />
	<datalist id="down">
		<option value="1"></option>
		<option value="2"></option>
		<option value="3"></option>
		<option value="4">5</option>//5能在下拉提示框中显示，但不会输入到input框之中，填充的内容只识别value的值
	</datalist>
	<input type="submit" value="submit" />
</form>
//select 标签得下拉框不能识别其中的value值
<form action="index.html">
	<select required="required" >
	  <option>1</option>
	  <option>2</option>
	  <option>3</option>
	  <option>4</option>
	  <option>5</option>
	</select>
	<input type="submit" value="select_submit" />
</form>

//max min placeholder name src
<form action="chart.html">
	//在type=‘data’，placeholder 无效
	<input type="date" name="data_1" id="data_1" placeholder="输入" required="required"/>
	<input type="date" name="data_2" id="data_2"  max="2011-12-02" />//选择2011-12-02之前的时间
	////在type=‘data’，size 无效
	<input type="number" name="num" max="3" min="0" placeholder="输入" size="30" />
	<input type="tel" name="num" max="3" min="0" placeholder="输入" size="30" />
	<input type="image" src="img/0020032851022998_b.jpg" width="30" height="30" />
</form>

//maxlength
<form action="index.html">
	<input type="text" name="usrname" maxlength="10"><br>
	<input type="submit" value="提交">
</form>

//multiple
<form action="index.html">
	<input type="email" name="mail" placeholder="mail" multiple />//可提交多个邮件地址，用","隔开
	<input type="file" name="file" multiple />//上传多个文件
	<input type="submit" />
</form>

<form action="index.html">
	<input type="text" name="email"><br>
	<input type="text" name="country" value="Norway" readonly><br>
	<input type="submit" value="提交">
</form>

//value
<form action="index.html" method="get">
	First name: <input type="text" name="fname" value="George" /><br />
	Last name: <input type="text" name="lname" value="Bush" /><br />
	<input type="submit" value="Submit form" />
</form>

//name
<form name="form1">
	a:<input type="checkbox" name="checkit" value="a" checked><br> b:
	<input type="checkbox" name="checkit" value="b"><br> c:
	<input type="checkbox" name="checkit" value="c"><br>
</form>
name值可以不一样，但不推荐<br>
<form name="form1">
	a:<input type="checkbox" name="checkit1" value="a" checked><br> b:
	<input type="checkbox" name="checkit2" value="b"><br> c:
	<input type="checkbox" name="checkit3" value="c"><br>
</form>
<form>
	<label for="sol1"> police</label>
	<input type="radio" name="solo1" value="police" id="sol1" />
</form>

<form name="form1">
	a:<input type="radio" name="checkit" value="a" checked><br> b:
	<input type="radio" name="checkit" value="b"><br> c:
	<input type="radio" name="checkit" value="c"><br>
</form>
下面是name值不同的一个例子，就不能实现多选一的效果了<br>
<form name="form1">
	a:<input type="radio" name="checkit1" value="a" checked><br> b:
	<input type="radio" name="checkit2" value="b"><br> c:
	<input type="radio" name="checkit3" value="c"><br>
</form>

表单 HTML input 标签

`<input/>`

猜你喜欢