h5 新表单元素

回复

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

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

x

1.基本内容

* HTML 5的约定 - <!doctype html>

* HTML 5 这个版本中,既可以使用HTML语法,还可以使用XHTML

2.新表单

1.INPUT新类型

* email类型 - 验证email的格式

* 判断当前字符串中是否包含"@"符号

* search类型

* url类型 - 验证网址的格式

* 判断当前字符串中是否包含"http://"

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5新表单元素一</title>
</head>
<body>
<form>
<!--
email类型:
* 提供的email格式验证
* 判断字符串中是否包含"@"符号
-->
Email:<input type="email"><br>
搜索:<input type="search"><br>
<!--
url类型:
* 提供url地址格式验证
* 判断字符串中是否包含"http://"
-->
URL地址:<input type="url"><br>
<input type="submit">
</form>
</body>
</html>

复制代码

效果：

* number类型

* min - 最小值

* max - 最大值

* step - 步长

* tel类型

* range类型

* min - 最小值

* max - 最大值

* step - 步长

* value - 当前值

* color类型

* date类型

例如:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5新表单元素一</title>
</head>
<body>
<form>
电话号码:<input type="tel"><br>
<!--
number类型
* min - 最小值
* max - 最大值
* step - 步长(增加或减小的值),默认值为1
-->
数字类型:<input type="number" min="18" max="50" step="2"><br>
<!--
range类型
* min - 最小值
* max - 最大值
* step - 步长
* value - 当前值
-->
范围类型:<input type="range" min="0" max="10" step="2" value="10"><br>
颜色类型:<input type="color"><br>
日期类型:<input type="date"><br>
<input type="submit">
</form>
</body>
</html>

复制代码

效果：

利用range类型做个小案例：

<!DOCTYPE html>
<head>
<script src="jquery-1.11.3.js"></script>
<title> h5动态选择颜色 </title>
<meta name="generator" content="editplus" charset="utf-8"/>
</head>
<body>
<div style="width:200px;height:200px;border:1px solid black;"></div><br>
红色:<input type="range" min="0" max="255" value="0"><br>
蓝色:<input type="range" min="0" max="255" value="0"><br>
绿色:<input type="range" min="0" max="255" value="0"><br>
<script>
$("input").change(function(){
$r=$($("input")[0]).val();
$b=$($("input")[1]).val();
$g=$($("input")[2]).val();
$("div").css("background-color","rgb("+$r+","+$b+","+$g+")");
});
</script>
</body>
</html>

复制代码

效果：

移动滑板后:

2.新表单元素

* datalist元素

* progress元素 - 进度条

* meter元素 - 刻度

* output元素 - 输出,并不常用

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新表单元素</title>
</head>
<body>
<form>
<!--
<datalist>元素
* 并不显示在HTML页面中
* 作用 - 数据与结构的分离
* 数据 - 一切显示在浏览器中的内容
* 结构 - HTML元素
利用<input>元素进行显示
* list属性 - 指定<datalist>元素的id属性值
-->
<datalist id="mylist">
<option>请选择</option>
<option>北京市</option>
<option>上海市</option>
<option>武汉市</option>
</datalist>
<input type="text" list="mylist">
<br>
<!--
<progress>元素
* max - 进度的最大值(峰值)
* value - 当前进度
-->
<progress id="progress" max="100" value="30"></progress>
<br>
<!--
<meter>元素
* value - 当前值
* min - 最小值
* max - 最大值
* low - 最小预警值
* high - 最大预警值
当value值达到最大与最小预警值时，刻度颜色会发生变化
-->
<meter min="0" max="100" value="80" low="10" high="90"></meter>
<br>
<input type="submit">
</form>
</body>
</html>

复制代码

效果：

例如：利用progress元素做动态进度条:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新表单元素</title>
</head>
<body>
<form>
<!--
<progress>元素
* max - 进度的最大值(峰值)
* value - 当前进度
-->
<progress id="progress" max="100" value="0"></progress>
<br>
<input type="submit">
</form>
<script>
var progress = document.getElementById("progress");
function add(){
var value = progress.value;
value++;
progress.value = value;
}
setInterval(add,100);
</script>
</body></html>

复制代码

效果：

[HTML5开发] h5 新表单元素

[HTML5开发] h5 新表单元素

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

阅读推荐

浏览过的版块

用微信扫一扫