Web速查-索引

定义

<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元素用法总结参看:传送门

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>
E-mail:

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>
数量 (1-99之间):

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>
范围(1-11):

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>
选择周:

视频讲解