h5 - 新表单属性

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

1.新表单属性

* placeholder属性 - 提供文本框的默认提示信息

* 用于替代原来的value属性

* autofocus属性 - 自动获取焦点

* 注意 - 只有属性名,不需要属性值

* multiple属性 - 允许输入多个值

* 注意 - 只有属性名,不需要属性值,多个值之间用逗号隔开

* form属性 - 允许表单元素定义<form>元素外

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5新表单属性</title>
</head>
<body>
<form id="myform">
<input type="text" value="请输入你的用户名"><br>
<input type="text" autofocus placeholder="请输入你的用户名"><br>
<input type="email" multiple>
<br>
<input type="submit">
</form>
<input type="url" form="myform">
</body>
</html>

复制代码

效果：

2.新表单验证

* 元素类型

* email类型

* url类型

* number类型

* 验证属性

* required - 验证不为空

* pattern - 匹配正则表达式

* min和max - 验证最小值和最大值

* number、range、meter等元素

* minlength和maxlength - 验证最小长度和最大长度

* minlength - 并不是HTML 5 的新属性

* minlength - HTML的规范中找不到

* maxlength - 应该叫做限制属性

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单新验证属性</title>
</head>
<body>
<form id="myform" name="myform">
用户名:<input type="text" name="user" required pattern="^[a-zA-Z0-9]{6,18}$"><br>
密码:<input type="text" minlength="6" maxlength="10">
<br>
<input type="submit" id="submit">
</form>
</body>
</html>

复制代码

效果：

3.扩展内容

* 表单提交

* <form>表单元素的submit事件

* <input type="submit">按钮的click事件

* 获取表单

* 通过通用的获取方式

* getElementById

* getElementsByName

* getElementsByTagName

* document.forms[索引值];

* document.表单名;

* 阻止默认行为

* return false;

* event.preventDefault();

* 匹配正则表达式

* regExp对象的test(string)方法,返回Boolean值

* String对象的match(regExp)方法,返回匹配的数组

* 浏览器遵循一个规范(Web规范)

* 或多或少扩展了规范内容

* Cookie

* 一个Cookie最大不能超过4KB

* 一个浏览器存储一个网站的Cookie最多200多

[HTML5开发] h5 - 新表单属性

[HTML5开发] h5 - 新表单属性

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

阅读推荐

浏览过的版块

用微信扫一扫