求一个HTML5 表单的写法例子_随笔

表单是用来获取用户输入的一些数据，最常见的就是注册，登录之类的；

首先，打开IDEA软件，并新建一个工程，建好后，右键创建一个html5文件，完成后便完成了最开始的工作；

接着我们先熟悉一些较常用的表单标签：表单<form>，输入域<input>，文本域<textarea>，按钮<button>，域的标题<legend>，控制标签<label>等。我们创建一个form,如图，输入一些你想要创建的东西（我演示的仅为用户密码）；

打开网页看效果图，便是这样的效果了，拥有了最简单的帐号密码；

同时，我们还可以添加一些选择的元素，如你喜欢什么游戏；

<!DOCTYPE html>

<html>

<head>

input[type='radio'],

input[type='checkbox'],

label {

cursor: pointer

}

</style>

</head>

<body>

学号：

<br />

密码：<input type="text" name="pwd" placeholder="请输入密码" password="键盘" />

<br />

性别：

<br />

电话：<input type="text" name="phone" placeholder="请输入电话号码" />

<br />

邮箱：<input type="text" name="email" placeholder="请输入注册邮箱" />

<br />

出生年月：<input type="text" name="birth" />

<br />

爱好：

<br />

</form>

</body>

</html>

HTML5中，新标准把文本框提示信息、表单校验、日期选择控件、颜色选择控件、范围控件、进度条、标签跨表单等功能直接加入新的表单标签中。但在众多现代浏览器中，最新版本的Opera浏览器对新型表单的支持才最为完美。

name: 标识表单提交时的key值 min: 标识当前输入框输入的最小值 max: 标识当前输入框输入的最大值 step: 标识点击增大/减小的时候，增加/减小的步长

当表单在提交前，此文本框会自动校验是否符合邮箱的正则表达式。

此类型标签的加入，输入范围内的数据变得非常简单容易，而且非常标准，用户输入可感知体验非常好。另外此标签可以跟表单新增加的output标签一块使用，达到一个联动的效果。

相关的日期属性还包括：month、time、week、datetime-local、datetime。

novalidate ：属性规定在提交表单时不应该验证form或input域。

autocomplete ：属性规定form或input域应该拥有自动完成功能。

欢迎分享，转载请注明来源：内存溢出

求一个HTML5 表单的写法例子