<input>标签用于搜集用户信息。
根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
| 属性 | 值 | 描述 |
| accept | mime_type | 指定提交的文件类型(多个类型之间使用英文的逗号隔开,文件类型的几种表述方式请参考 -> 传送门) |
| alt | text | 指定图像的说明文字 |
| autocomplete | on、off | 指定是否启用浏览器预测输入 |
| autofocus | autofocus | 指定是否自动获得焦点 |
| checked | checked | 指定该属性的复选框,默认显示为勾选状态 |
| disabled | disabled | 指定是否禁用该 input 元素 |
| form | formname | 指定其所属的一个或多个表单 id 值(在 HTML5 中,表单允许你将 input 放在文档中的任意位置,当你这么做的时候,可以通过指定该属性来确定元素所关联的表单) |
| formaction | URL | 指定表单提交的位置(只能作用于具有提交性质的按钮,比如 type="submit" 或 type="image") |
| formenctype | application/x-www-form-urlencoded、multipart/form-data、text/plain | 指定表单提交的编码方式(只能作用于具有提交性质的按钮,比如 type="submit" 或 type="image") |
| formmethod | get、post | 指定表单提交的方法(只能作用于具有提交性质的按钮,比如 type="submit" 或 type="image") |
| formnovalidate | formnovalidate | 指定是否重置 form 元素的 novalidate 属性,如果重置,那么当表单提交时 input 元素将不再进行任何验证(只能作用于具有提交性质的按钮,比如 type="submit" 或 type="image") |
| formtarget | _blank、_self、_parent、_top、framename | 指定表单提交后在何处打开 action URL(只能作用于具有提交性质的按钮,比如 type="submit" 或 type="image") |
| height | pixels、% | 指定图像的高度(像素) |
| list | datalist-id | 指定一个数据列表,即 datalist 元素的 id 值 |
| max | number、date | 指定可接受的最大值,以便进行输入验证 |
| maxlength | number | 指定用户可以在文本框输入的最大字符数 |
| min | number、date | 指定可接受的最小值,以便进行输入验证 |
| multiple | multiple | 指定该属性后可以上传多个文件 |
| name | field_name | 指定元素的名称,用于在 JavaScript 中引用元素,或者在表单提交后引用表单数据,只有设置了 name 属性的表单才能在提交表单时传递该值 |
| pattern | regexp_pattern | 指定一个用于输入验证的正则表达式 |
| placeholder | text | 指定一个占位提示文本 |
| readonly | readonly | 将文本框设为只读模式,防止用户编辑其内容 |
| required | required | 表明用户必须输入一个值,否则无法通过输入验证 |
| size | number_of_char | 指定文本框的宽度 |
| src | URL | 指定要显示的图像的 URL |
| step | number | 指定上下调节数值的步长 |
| type | button、checkbox、color、date、datetime-local、email、file、hidden、image、month、number、password、radio、range、reset、search、submit、tel、text、time、url、week | 规定 input 元素的类型 |
| value | text | 指定输入字段的初始值 |
| width | pixels、% | 指定图像的宽度(像素) |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web(Html5+Css3)</title>
</head>
<body>
<form action="demo/welcome.php" method="post">
名字:<input type="text" name="name"><br><br>
邮箱:<input type="text" name="email"><br><br>
<button type="submit">提交</button>
</form>
</body>
</html>
更多input元素用法总结参看:传送门
| value | 描述 |
| button | 按钮 |
| checkbox | 多选框 |
| color | 颜色盘 |
| date | 时间日历(年,月,日(没有时间)) |
| datetime-local | 本地时间日历 年,月,日,时间) |
| 邮箱地址栏 | |
| file | 上传文件栏 |
| hidden | 隐藏 |
| image | 图片 |
| month | 日历栏(年,月) |
| number | 数字栏 |
| password | 密码栏 |
| radio | 单选栏 |
| range | 滑块栏 |
| reset | 重置按钮 |
| search | 搜索字段(比如站内搜索或谷歌搜索等) |
| submit | 提交按钮 |
| tel | 输入电话号码的字段 |
| text | 默认.输入单行文本字段 |
| time | 时间栏 |
| url | 输入URL字段 |
| week | 周年栏 |