html5学习笔记五--表单

最新推荐文章于 2024-07-10 16:57:46 发布

从此程序员

最新推荐文章于 2024-07-10 16:57:46 发布

阅读量848

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/jasenin/article/details/40399493

版权

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

html5表单是很强大的东西，里面增加了例如Email，range等类型。

一，首先介绍的几个输入类型应用格式差不多，首先介绍下demo_form.php，在使用这些类型时首先把数据提交到服务器，如果格式不对就会有错误反馈。

详细介绍其中的search类型：

<!DOCTYPE html >
<html>
<body>
<from action="demo_form.php" method="get">
请输入日期: <input type="date" name="date1" value="2014-10-23"/>
<input type="submit" />
</body>
</html>

value是指默认值。

二，input属性

1，autocomplete

用于对输入的内容实现自动完成，比如输入b马上提示beijing

autocomplete 属性有三种 on ，off，空值

下面是一个例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<body>
<h2>自动完成实例</h2>
输入你最喜欢的城市<br/>
<from  autocomplete="on">
 <input type="text" id="name1" list="citylist">
 <datalist id="citylist" style="display:none;"
 	<option value="Beijing">Beijing</option>
    <option value="c">c</option>
    <option value="tianjing">tianjing</option>
  </datalist>


</form>
</body>
</html>

测试之后，只有在ie下可以实现，搜狗和360不能实现。

2，autofocus属性

在一个页面中，会把光标定位在需要输入的表单上。

<!DOCTYPE html >
<html >
<head>
<meta charset="utf-8" >
<title>autofocus</title>
</head>

<body>
<form>
	<p>
    <label for="textarea1"></label>
    <textarea name="textarea1" id="textarea1" cols="45" rows="5"  autofocus="on">rules</textarea><br/>
    </p>
    <p>
    <input type="submit" value="同意"  >
    <input type="submit" value="拒绝" >
    </p>

</form>
</body>
</html>

当然也可以把autofocus放在

<input type="submit" value="同意" autofocus=“on” >上

3，新增form属性

form属性可以让<form></form>之外的元素一起随着表单提交，只要id相同就可以。

<!DOCTYPE html >
<html >
<head>
<meta charset="utf-8" >
<title>autofocus</title>
</head>

<body>
<form>

    <form action="" method="get" id="1">
    请输入国家：<input type="text" name="guojia" autofocus/>
    <input type="submit" value="提交"  >   
</form>

	请输入地址:<input type="text" name="address" form="1"/>

</body>
</html>

按下提交按钮之后，服务器会受到国家和地址两个信息一起。