TML5 新的表单元素

HTML5 有以下新的表单元素:

• <datalist>

• <keygen>

• <output>

注意:不是所有的浏览器都支持HTML5 新的表单元素，但是你可以在使用它们，即使浏览器不支持表单属性，仍然可以显示为常规的表单元素。

HTML5 <datalist> 元素

<datalist> 元素规定输入域的选项列表。

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

使用 <input> 元素的列表属性与 <datalist> 元素绑定.

实例

<input> 元素使用<datalist>预定义值:

<inputlist="browsers"><datalistid="browsers"><optionvalue="Internet Explorer"><optionvalue="Firefox"><optionvalue="Chrome"><optionvalue="Opera"><optionvalue="Safari"></datalist>

HTML5 <keygen> 元素

<keygen> 元素的作用是提供一种验证用户的可靠方法。

<keygen>标签规定用于表单的密钥对生成器字段。

当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

实例

带有keygen字段的表单:

<formaction="demo_keygen.asp"method="get">用户名: <inputtype="text"name="usr_name">加密: <keygenname="security"><inputtype="submit"></form>

尝试一下 ?

HTML5 <output> 元素

<output> 元素用于不同类型的输出，比如计算或脚本输出：

实例

将计算结果显示在 <output> 元素:

<formoninput="x.value=parseInt(a.value)+parseInt(b.value)">0<inputtype="range"id="a"value="50">100 +<inputtype="number"id="b"value="50">=<outputname="x"for="a b"></output></form>

HTML5 新表单元素

如您还有不明白的可以在下面与我留言或是与我探讨QQ群{{308855039，我们一起飞！

TML5 Forms

HTML5 brings many features and improvements to web form creation. There are new attributes and input types that were introduced to help create better experiences for web users.

Form creation is done in HTML5 the same way as it was in HTML4:

HTML5为Web表单创建带来了许多功能和改进。 引入了新的属性和输入类型，以帮助为网络用户创造更好的体验。

HTML中的表单创建方式与HTML4中一样：

1 新属性 New Attributes

HTML5 has introduced a new attribute called placeholder. On <input> and <textarea> elements, this attribute provides a hint to the user of what information can be entered into the field.

HTML5引入了一个名为placeholder的新属性。 在<input>和<textarea>元素上，此属性向用户提供可以在该字段中输入哪些信息的提示。

The autofocus attribute makes the desired input focus when the form loads:

2 Forms with Required Fields

The "required" attribute is used to make the input elements required.

The form will not be submitted without filling in the required fields.

The autocomplete attribute specifies whether a form or input field should have autocomplete turned on or off.When autocomplete is on, the browser automatically complete values based on values that the user has entered before.

autocomplete属性指定表单或输入字段是否应该启用或禁用自动完成。

当自动填充开启时，浏览器会根据用户之前输入的值自动完成值。

HTML5添加了几种新的输入类型：- color- date- datetime- datetime-local- email- month- number- range- search- tel- time- url- weekNew input attributes in HTML5:- autofocus- form- formaction- formenctype- formmethod- formnovalidate- formtarget- height and width- list- min and max- multiple- pattern (regexp)- placeholder- required- step

3 搜索框 Creating a Search Box

Search Options

The <datalist> tag can be used to define a list of pre-defined options for the search field:

<datalist>标签可用于定义搜索字段的预定义选项列表：

<option> defines the options in a drop-down list for the user to select. The ID of the datalist element must match with the list attribute of the input box.

<option>在用户选择的下拉列表中定义选项。

datalist元素的ID必须与输入框的list属性相匹配。

Creating More Fields

Some other new input types include email, url, and tel:

These are especially useful when opening a page on a modern mobile device, which recognizes the input types and opens a corresponding keyboard matching the field's type:

当在现代移动设备上打开页面时，这些功能特别有用，它识别输入类型并打开与字段类型匹配的相应键盘：

These new types make it easier to structure and validate HTML forms.

这些新类型使得HTML表单更易于构造和验证。

html区块

●区块元素

大多数html元素被定义为块级元素或内联元素.

块级元素在浏览器显示时,通常以新行来开始(和结束)

例如:<h1>,<p>,<ul>,<table>,<div>等

●内联元素

内联元素在显示时通常不会以新行开始

例如:<b>,<td>,<a>,<img>等

●div元素

html<div>元素是块级元素,它可用于组合其他html元素的容器.

<div>元素没有特定的含义.除此之外,由于它属于块级元素,浏览器会在其前后显示折行.

如果与css一同使用,<div>元素可用于对大的内容块设置样式属性.

●<span>元素

html<span>元素是内联元素,可用作文本的容器.

<span>元素也没有特定的含义.

当与css一同使用时,<span>元素可用于为部分文本设置样式属性.

二 html表单

html表单用于搜集不同类型的用户输入.

<form>标签用于创建供用户输入的html表单.

<form>

...

</form>

使用action属性规定:当提交表单时,向何处发送表单数据.

<form action="url">

</form>

method属性

method属性指定在提交表单时使用的http方法:get或post

下面是两个示例:

<form action="url" method="get">

<form action="url" method="post">

提示:

当你使用get时,表单数据将在页面地址中使用.

如果表单正在更新数据或使用敏感信息(密码),请使用post.post提供更好的安全性,因为提交的数据不会再页面地址中显示.

name属性

name属性指定表单的名称

要接手用户的输入,你需要相应的表单元素,如文本字段.而输入类型是由类型属性(type)定义的,大多数经常被用到的输入类型有:text,password,radio,checkbox,submit等

下面是一个请求用户名和密码的表单例子:

<form>

<input type="text" name="username" /><br/>

<input type="password" name="password" />

</form>

单选框

<input type="radio">标签定义了表单单选框选项

下面是一个单选框的例子:

<form>

<input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female

</form>

运行效果如下:

注意:没有结束标签,也能正常显示,但是有时候会出现意想不到的情况.所以建议还是要加上结束标签.

复选框

<input type="checkbox">定义了复选框,用户需要从若干给定的选择中选取一个或若干选项.

下面是一个复选框的例子:

<form>

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br/>

<input type="checkbox" name="vehicle" value="Car">I have a Car

</form>

运行效果如下:

提交按钮将表单提交到其action属性:

<input type="submit" value="Submit">

运行效果如下:

表单提交后,应该使用服务器端语言(如php)进行数据处理.当完成html和css课程后,你可以试着学习php课程.

三 html颜色

html颜色由一个十六进制符号来定义,这个符号由红色,绿色和蓝色的值组成(rgb)

rgb颜色的最小值是0(十六进制:#000).最大值是255(十六进制:#FFF)

四 html框架

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面

<iframe>标签规定一个内联框架

一个内联框架被用来在当前html文档中嵌入另一个文档

标记一个内联框架:

<iframe src="url"></iframe>

提示:你可以把需要的文本放置在<iframe>和</iframe>之间,这样就可以应对不支持<iframe>的浏览器.html5中不支持<frame>标签.

定义iframe标签的高度与宽度

height和width属性用来定义iframe标签的高度与宽度.

属性默认以像素为单位,但是你可以指定其按比例显示(如:80%)

下面是一个例子:

<iframe src="url" width="200" height="200"></iframe>

定义iframe表示是否显示边框

frameborder属性用来定义iframe表示是否显示边框

设置属性值为"0"移除iframe的边框:

<iframe src="url" frameborder="0"></iframe>