HTML5 WEB表单

type属性：

html5属性有23种可能的值，
默认为type=“text”

required属性：

用于标记一个表单字段是必需的,如果为空则无法提交并提示错误。

代码：

<form action="">
<label> Email: <input type="email" required /></label>
<input type="submit"  />
</form>

最小值和最大值：min和nax属性

<label >Time：<input type="time" min="17:00" max="22:00" name="dinner"></label>

step属性：设定步长

<input type="number" min="2" max="100" step="5" name="cost" id="cost">

placeholder属性：

在输入框没内容时进行填充，有内容时消失。

<label> Email: <input type="email"  placeholder="xxx@qq.com" required /></label>

pattern属性：正则表达式 readonly属性：只读，适合文本，密码，电子邮件，URL，日期/时间

<label> Email: <input type="email"  placeholder="xxx@qq.com" required readonly /></label>

disabled属性：禁用元素

readonly与disabled区别,readonly可随表单提交,disabled不能随表单提交.

<label> Email: <input type="email"  placeholder="xxx@qq.com" required disabled /></label>

maxlength属性: 限定输入字符长度.

<label> Email: <input type="email"  placeholder="xxx@qq.com" required maxlength="10" /></label>

size属性: form属性:

把表单控件与任意一个form表单关联起来,随另一个表单一起提交.

autocomplete属性:是否让浏览器记住你之前输入的值,并且这次帮助你输入.

有 on, off,default 三个值.

<p>Login:</p>
<p>
<label for="user">Username:</label>
<input type="text" name="user" id="user" autocomplete="on">
</p>
<p>
<label for="pwd">Password:</label>
<input type="password" name="pwd" id="pwd" autocomplete="off">
</p>
<input type="submit"  />

autofocus属性：使表单控件在页面载入时获得焦点，只能有一个。 multiple属性: 添加多个文件 accept属性:选择接受的文件类型

type

文本框:

<input type="text">

密码框:

<input type="password" >

复选框:

<input type="checkbox" >

单选按钮:`

<ul><li>
<label >red:
<input type="radio" name="favoritecolor" value="red"></label>
</li></ul><ul><li>
<label >green:
<input type="radio" name="favoritecolor" value="green"></label>
</li></ul><ul><li>
<label >blue:
<input type="radio" name="favoritecolor" value="blue"></label>
</li></ul>

提交按钮:

<input type="submit">

如果包含了name属性,名值对也会一起提交.

重置按钮:

<input type="reset">

选择文件按钮:

<input type="file">

隐藏

<input type="hidden">

图片

<input type="image">

给提交按钮加图片,不是用来上传图片

按钮

<input type="button">

和更易于设计样式, 但是type button可以与input样式一样

H5新增的Type值

电子邮件:

<input type="email">

URL:

<input type="url">

电话:

<input type="tel">

数字:

<input type="number">

滑动条:

<input type="range">

搜索框:

<input type="search">

拾色器:

<input type="color">

日期选择器:

<input type="date">

UTC日期和时间:

<input type="datetime">

本地日期和时间:` 月份:

<input type="month">

时间:

<input type="time">

周历:

<input type="week">

表单验证属性:validity 新的表单:

<datalist>

通过input中的list属性进行绑定.

<input type="text"  list="animalnames">
<datalist id="animalnames">
<option value="quack">duck</option>
<option value="banana slug" label="sssss" />
<option value="sheep" label="bah" />

</datalist>

优雅降级,添加

<select>

标签,如果无法显示datalist则显示select

output元素:表现得和span一样,用于输出内容. meter元素

颜色 绿->黄->红

<meter value="70" min="0" max="100"  low="73" high="87">ddd</meter>

progress元素:

<progress value="100" min="0" max="1000"  >ddd</progress>

keygen元素:

其他表单元素

label标签

<label>

标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label>

标签的 for 属性应当与相关元素的 id 属性相同。

<form> ,<fieldset>和<legend>,<select><option><optgroup><textarea><button>

• 点赞
• 收藏
• 分享
• 文章举报

岑布斯 发布了4 篇原创文章 · 获赞 0 · 访问量 6476 私信 关注