HTML5 表单属性

HTML5 新的表单属性
HTML5的<form>和<input>标签添加了几个新的属性
<from>新属性：
1.autocomplete
2.novalidate
<input>新属性
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 与 width
list
min 与 max
multiple
pattern (regexp)
placeholder
required
step

<from>/<input>autocomplete属性
autocomplete属性规定from或input域应该拥有自动完成功能
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项
提示：autocomplete属性有可能在from元素中是开启的，而在input元素中是闭合的
🐖：autocomplete适用于<from>标签，以及以下类型的<input>标签：text,url,search,telephone,email,password,detepickers以及color

实例：HTML form中开启autocomplete（一个input字段关闭autocomplete）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php" autocomplete="on">
First name:<input type="text" name="fname">

Last name: <input type="text" name="lname">

E-mail: <input type="email" name="email" autocomplete="off">

<input type="submit">
</form>

<p>填写并提交表单，然后重新刷新页面查看如何自动填充内容。</p>
<p>注意 form 的 autocomplete 属性为 "on"（开），但是 e-mail 自动为“off”（关）。</p>

</body>
</html>
提示:某些浏览器中，您可能需要启用自动完成功能，以使该属性生效。

<from>novalidate属性
novalidate属性是一个boolean属性
novalifate属性规定在提交表单是不应该验证from或input
实例：无需验证提交的表单数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

<p><strong>注意：</strong>在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。</p>

</body>
</html>

<input>autofocus属性
autofocus属性是一个boolean属性
autofocus属性福鼎在页面加载时，域自动获得焦点
实例：让“first name” input输入域在页面载入是自动聚焦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">
First name: <input type="text" name="fname" autofocus>

Last name: <input type="text" name="lname">

<input type="submit">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 autofocus 属性。</p>

</body>
</html>

<input>from属性
from属性规定输入域所属的一个或多个表单
提示：如需引用一个以上的表单，请使用空格分隔的列表
实例：位于from表单外的input字段引用HTML from（该input表单仍然属于from表单的一部分）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname">

<input type="submit" value="提交">
</form>

<p> "Last name" 字段没有在 form 表单之内，但它也是 form 表单的一部分。</p>

Last name: <input type="text" name="lname" form="form1">

<p><b>注意:</b> IE 不支持 form 属性</p>

</body>
</html>

<input>formaction属性
The formaction 属性用于描述表单提交的URL地址.
The formaction 属性会覆盖<form> 元素中的action属性.
注意: The formaction 属性用于 type="submit" 和 type="image".
实例：HTML from表单包含两个不同地址的提交按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">
First name: <input type="text" name="fname">

Last name: <input type="text" name="lname">

<input type="submit" value="提交">

<input type="submit" formaction="demo-admin.php" value="提交">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 formaction 属性。</p>

</body>
</html>

<input> formenctype属性
formenctype属性描述了表单提交到服务器的数据编码（支队from表单中 method=“post”表单）
formenctype属性覆盖from元素的enctype属性
主要：该属性与type= "submit"和 type = ”image"配合使用
实例：第一个提交按钮已默认编码发送表单数据，第二个提交按钮以“multipart/from-data”编码格式发送表单数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<form action="demo-post-enctype.php" method="post">
First name: <input type="text" name="fname">

<input type="submit" value="提交">
<input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 formenctype 属性。</p>

</body>
</html>

<input>formmethod属性
formmethod属性覆盖了<from>元素的method元素
注意：该属性可以与type=“submit”和type=“image”配合使用
实例：重新定义表单提交方式实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php" method="get">
First name: <input type="text" name="fname">

Last name: <input type="text" name="lname">

<input type="submit" value="提交">
<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 formmethod 属性。</p>

</body>
</html>

<input>fromnovalidate属性
novalidate属性是一个boolean属性
novalidate属性描述<input>元素在表单提交时无需被验证
fromnocalidate属性会覆盖<from>元素的novalidate属性
注意：fromnovalidate属性与type="submit"一起使用
实例：两个提交按钮的表单（使用与不使用验证）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">
E-mail: <input type="email" name="userid">

<input type="submit" value="提交">

<input type="submit" formnovalidate="formnovalidate" value="不验证提交">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本,或 Safari 不支持 input 标签的 formnovalidate 属性。</p>

</body>
</html>

<input>formtarget属性
formtarget属性制定一个名称或一个关键字来指明表单提交数据接收后的展示
formtarget属性覆盖<from>元素的target属性
注意：formtarget属性与type="submit"和type="image"配合使用
实例：两个提交按钮的表单，在不同窗口中显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">
First name: <input type="text" name="fname">

Last name: <input type="text" name="lname">

<input type="submit" value="正常提交">
<input type="submit" formtarget="_blank" value="提交到一个新的页面上">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 formtarget 属性。</p>

</body>
</html>

<input>width和height属性
height和width属性规定用于image类型的<input>标签的图像高度和宽度
注意：height和width属性只是用image类型的<input>标签
提示：图像通常会同时制定高度和宽度属性，如果图像设置高度和宽度，图像所需的空间在加载页时会被保留，如果没有这些属性，浏览器不知道图像的大小，并不能预留适当的空间，图片在加载过程中会使页面效果改变（尽管图片与加载）
实例：定义一个退选哪个提交按钮，使用height和width
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">
First name: <input type="text" name="fname">

Last name: <input type="text" name="lname">

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

</body>
</html>

<input>list属性
list属性规定输入域的datalist，datalist是输入域的选项列表
实例：在<datalist>中预定义<input>值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>

<p><strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。</p>

</body>
</html>

<input>min和max属性
min，max和step属性用于为包含数字或日期的input类型规定限定
注意：min，max和step属性适用于以下类型的<input>标签：dete pickers， number以及range
实例：<input>元素最小值与最大值设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">

输入 1980-01-01 之前的日期:
<input type="date" name="bday" max="1979-12-31">

输入 2000-01-01 之后的日期:
<input type="date" name="bday" min="2000-01-02">

数量 (在1和5之间):
<input type="number" name="quantity" min="1" max="5">

<input type="submit">
</form>

<p><strong>注意:</strong> Internet Explorer 9及更早 IE 版本，Firefox 不支持 input 标签的 max 和 min 属性。</p>
<p><strong>注意:</strong>
在 Internet Explorer 10中 max 和 min 属性不支持输入日期和时间，IE 10 不支持这些输入类型。</p>

</body>
</html>

<input>multiple属性
multiple属性是一个boolean属性
multiple属性规定<input>元素中可选择多个值
注意：multiple属性适用于提下类型的<input>标签：email和file
实例：上传多个文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">
选择图片: <input type="file" name="img" multiple>
<input type="submit">
</form>

<p>尝试选取一张或者多种图片。</p>

<p><strong>注意:</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 multiple 属性。</p>

</body>
</html>

<input>pattern属性
pattern属性描述了一个正则表达式用于验证<input>元素值
注意：pattern属性适用于以下类型的<input>标签：text，search,url,email,password
提示：是用来全局title属性描述了模式
实例：显示了一个只能包含三个字母的文本域（不含数字及特殊字符）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>

<p><strong>注意:</strong> Internet Explorer 9及更早 IE 版本，或 Safari 不支持 input 标签的 pattern 属性。</p>

</body>
</html>

<input>placeholder属性
placeholder属性提供一种提示（hint），描述输入域所期待的值
剪短的提示在用户输入值钱会显示在输入域上
注意：placeholder属性使用与以下类型的<input>标签：text,search,url,telephone,email以及 password
实例：input字段提示文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">
<input type="text" name="fname" placeholder="First name">

<input type="text" name="lname" placeholder="Last name">

<input type="submit" value="提交">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 placeholder 属性。</p>

</body>
</html>

<input>required属性
required属性是一个boolean属性
required属性规定必须在提交之前填写输入域（不能为空）
注意：required属性适用于一下类型的<input>标签：text,search,telephone,email,password,date pickers,number,checkbox,radio以及file
实例：不能为空的input字段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">
Username: <input type="text" name="usrname" required>
<input type="submit">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本，或 Safari 不支持 input 标签的 required 属性。</p>

</body>
</html>

<input>step属性
step属性为输入域规定合法的数字间隔
如果step="3",则合法的数是-3，0，3，6
提示：step属性可以与max和min属性创建一个区域之
注意：step属性与一下type类型一起使用：number,range,date,datetime,datetime-local,month,time,week
实例：规定input step步长为3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<form action="demo-form.php">
<input type="number" name="points" step="3">
<input type="submit">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本，或 Firefox 不支持 input 标签的 step 属性。</p>

</body>
</html>

HTML5<input>标签
<from> 定义一个from表单
<input>定义一个input

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,558评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,002评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,036评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,024评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,144评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,255评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,295评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,068评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,478评论 1赞 305
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,789评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,965评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,649评论 4赞 336
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,267评论 3赞 318
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,982评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,800评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,847评论 2赞 351

推荐阅读更多精彩内容

  • （3.2）HTML5：表单属性
    表单属性 1.autocomplete属性 form 或input 域应该拥有自动完成功能 例如：autocomp...
    越IT阅读 291评论 0赞 0
  • HTML5 表单属性
    兼容性参考：https://caniuse.com/1）新的 form 属性：autocompletenovali...
    yzr_0802阅读 214评论 0赞 0
  • HTML5 表单元素
    HTML5 新的表单元素HTML5有以下新的表单元素 🐖：不是所有的浏览器都支持HTML5新的表单元素，但是你...
    龍飝阅读 258评论 0赞 1
  • HTML标签
    HTML标签解释大全 一、HTML标记 标签：!DOCTYPE 说明：指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,232评论 1赞 41
  • [转]HTML5设计原理
    格式后期处理。 Jeremy Keith在 Fronteers 2010 上的主题演讲 今天我想跟大家谈一谈HTM...
    LordZhou阅读 1,123评论 0赞 17