HTML——input
一个简单的HTML表单，包含两个文本输出框和一个提交按钮：
<form action="form_action.asp" method="get"> First name:<input type="text" name="fname" /> last name:<input type="text" name="lname" /> <input type="submit" value="Submit" /> </form>
定义和用法
<input>标签用于搜集用户信息。
根据不同的type属性值，输入字段拥有很多形式。
输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。
| 属性 | 值 | 描述 |
| accept | mime_type | 规定通过文件上传来提交的文件的类型 |
| align |
left right top middle bottom |
规定图像输入的对齐方式（不赞成使用） |
| alt | text | 定义图像输入的替代文本 |
| autocomplete |
on off |
规定是否使用输入字段的自动完成功能 |
| autofocus | autofocus |
规定输入字段在页面加载时是否获得焦点 （不适用于type=“hidden”） |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| disabled | disabled | 当input元素加载时禁用此元素 |
| form | formname | 规定输入字段所属的一个或多个表单 |
| formaction | URL |
覆盖表单的action属性 （适用于type=“submit”和type=“image”） |
| formenctype |
覆盖表单的enctype属性 （适用于type=“submit”和type=“image”） |
|
| formmethod |
get post |
覆盖表单的method属性 （适用于type=“submit”和type=“image”） |
| formnovalidate | formnovalidate |
覆盖表单的novalidate属性 如果适用该属性，则提交表单时不进行验证 |
| formtarget |
_blank _self _parent _top framename |
覆盖表单的target属性 （适用于type=“submit”和type=“image”） |
| height |
pixels % |
定义input字段的高度，适用于type=“image” |
| list | datalist-id | 引用包含输入字段的预定义选项的datalist。 |
| max |
number date |
规定输入字段的最大值 请于“min”属性配合适用，来创建合法的范围 |
| maxlength | number | 规定输入字段中字符的最大长度。 |
| min |
number date |
规定输入字段的最小值 请于“max”属性配合适用，来创建合法的范围 |
| multiple | multiple | 如果适用该属性，则允许一个以上的值。 |
| name | field_name | 定义input元素的名称 |
| pattern | regexp_pattern | 规定输入字段的值的模式或格式 |
| placeholder | text | 规定帮助用户填写输入字段的提示 |
| readonly | readonly | 规定输入字段为只读 |
| required | required | 指示输入字段的值是必须的 |
| size | number_of_char | 定义输入字段的宽度 |
| src | URL | 定义以提交按钮形式显示图像的URL |
| step | number | 规定输入字的合法数字间隔 |
| type |
button checkbox file hidden image password radio reset submit text |
规定input元素的类型 |
| value | value | 规定input元素的值 |
| width |
pixels % |
定义input字段的宽度（适用于type=“image”） |
实例：
（1）文本域
<form> 名： <input type="text" name="firstname"> <br /> 姓： <input type="text" name="lastname"> </form>
结果输出：
（2）密码域
<form> 用户： <input type="text" name="user"> <br /> 密码： <input type="password" name="password"> </form> <p> 请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。 </p>
结果输出：
（3）复选框
<form> 我喜欢自行车： <input type="checkbox" name="Bike"> <br /> 我喜欢汽车： <input type="checkbox" name="Car"> </form>
结果输出：
（4）单选按钮
<form> 男性： <input type="radio" checked="checked" name="Sex" value="male" /> <br /> 女性： <input type="radio" name="Sex" value="female" /> </form> <p>当用户点击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态。</p>
结果输出：
（5）简单的下拉列表
<form> <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>
结果输出：
（6）另一个下拉按钮
<form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected="selected">Fiat</option> <option value="audi">Audi</option> </select> </form>
结果输出：
（7）创建按钮
<form> <input type="button" value="Hello world!"> </form>
结果输出：
（8）围绕数据的边框
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
<p>如果表单周围没有边框，说明您的浏览器太老了。</p>
结果输出：
（9）带有框和确认按钮的表单
<form action="/demo/demo_form.asp"> 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"> </form> <p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
执行结果：
（10）带有复选框的表单
<form name="input" action="/html/html_form_action.asp" method="get"> I have a bike: <input type="checkbox" name="vehicle" value="Bike" checked="checked" /> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car" /> <br /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /> <br /><br /> <input type="submit" value="Submit" /> </form> <p>如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。</p>
执行结果：
（11）带有单选按钮的表单
<form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form>
执行结果：
（12）从表单发送电子邮件
<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain"> <h3>这个表单会把电子邮件发送到 W3School。</h3> 姓名：<br /> <input type="text" name="name" value="yourname" size="20"> <br /> 电邮：<br /> <input type="text" name="mail" value="yourmail" size="20"> <br /> 内容：<br /> <input type="text" name="comment" value="yourcomment" size="40"> <br /><br /> <input type="submit" value="发送"> <input type="reset" value="重置"> </form>
执行结果：
