input

定义

<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>NTHOME-零基础入门学习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>

type属性

value	描述
button	按钮
checkbox	多选框
color	颜色盘
date	时间日历（年，月，日（没有时间））
datetime-local	本地时间日历年，月，日，时间）
email	邮箱地址栏
file	上传文件栏
hidden	隐藏
image	图片
month	日历栏（年，月）
number	数字栏
password	密码栏
radio	单选栏
range	滑块栏
reset	重置按钮
search	搜索字段（比如站内搜索或谷歌搜索等）
submit	提交按钮
tel	输入电话号码的字段
text	默认.输入单行文本字段
time	时间栏
url	输入URL字段
week	周年栏

实例

type="button"

<form>
    <input type="button" value="点我">
</form>

type="checkbox"

<form>
    <input type="checkbox" name="fruit" value="watermelon">西瓜<br>
    <input type="checkbox" name="fruit" value="banana">香蕉<br>
    <input type="checkbox" name="fruit" value="blueberry">蓝莓<br>
</form>

type="color"

<form>
    选择最喜欢的颜色: <input type="color" name="favcolor"><br>
</form>

type="date"

<form>
    生日: <input type="date" name="bday">
</form>

type="datetime-local"

<form>
    生日 (日期和时间): <input type="datetime-local" name="bdaytime">
</form>

type="email"

<form>
    E-mail: <input type="email" name="usremail">
</form>

type="file"

<form>
    选择一个文件: <input type="file" name="filedata">
</form>

type="hidden"

<form>
    姓名: <input type="text" name="fname"><br>
    <input type="hidden" name="country" value="Norway">
    <p>注意隐藏字段是看不到滴。</p>
</form>

type="image"

<form>
    <input type="image" src="images/FishC.png" alt="Submit" width="64" height="64">
</form>

type="month"

<form>
    生日 ( 月和年 ): <input type="month" name="bdaymonth">
</form>

type="number"

<form>
    数量 (1-99之间): <input type="number" name="quantity" min="1" max="99">
</form>

type="password"

<form>
    账号: <input type="text" name="userName"><br>
    密码: <input type="password" name="pwd" maxlength="11"><br>
</form>

type="radio"

<form>
    <input type="radio" name="gender" value="女"> 女<br>
    <input type="radio" name="gender" value="男"> 男<br>
</form>

type="range"

<form>
    范围(1-11): <input type="range" name="points" min="1" max="11">
</form>

type="reset"

<form>
    姓名: <input type="text" name="email"><br>
    地址: <input type="text" name="pin" maxlength="11"><br>
    <input type="reset" value="重置">
</form>

type="search"

<form>
    度娘: <input type="search" name="bdSearch">
</form>

type="submit"

<form action="demo/welcome.php" method="post">
    名字：<input type="text" name="name"><br><br>
    邮箱：<input  type="text" name="email"><br><br>
    <input type="submit">
</form>

type="tel"

<form>
    电话号码: <input type="tel" name="usrtel"><br>
</form>

type="text"

<form action="demo/welcome.php" method="post">
    兴趣：<input type="text" name="fun"><br><br>
    爱好：<input  type="text" name="hobby"><br><br>
    <input type="submit">
</form>

type="time"

<form>
    选择时间: <input type="time" name="usr_time">
</form>

type="url"

<form>
    添加的主页: <input type="url" name="userHomepage"><br>
</form>

type="week"

<form>
    选择周: <input type="week" name="year_week">
</form>

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

Safari	Chrome	FireFox	IE
1.0	1.0	1.0	1.0