XHTML、表单、HTML5、图形、媒体、API

XHTML

一、简介

1.什么是XHTML?

(1)XHTML 是以 XML 格式编写的 HTML

(2)XHTML 指的是可扩展超文本标记语言

(3)XHTML 与 HTML 4.01 几乎是相同的,XHTML 是更严格更纯净的 HTML 版本

(4)XHTML 得到所有主流浏览器的支持

2.为什么使用XHTML?

XML 是一种必须正确标记且格式良好的标记语言,XML与HTML结合为XHTML,使得HTML的代码格式更加规范

3.XHTML与HTML的区别

(1)文档结构:

XHTMLDOCTYPE 是强制性的

<html>中的 XMLnamespace 属性是强制性的

<html>、<head>、<title> 以及 <body> 也是强制性的

(2)元素语法:

XHTML 元素必须正确嵌套

XHTML 元素必须始终关闭

XHTML 元素必须小写

XHTML 文档必须有一个根元素

(3)属性语法:

XHTML 属性必须使用小写

XHTML 属性值必须用引号包围

XHTML 属性最小化也是禁止的

4.文档结构的三个强制要求

XHTML 文档必须进行 XHTML 文档类型声明,<html>、<head>、<title> 以及 <body> 元素也必须存在,并且必须使用 <html> 中的 xmlns 属性为文档规定 xml 命名空间。下面的例子展示了带有最少的必需标签的 XHTML 文档:

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Title of document</title>

</head>

<body>

...

</body>

</html>

5.如何从HTML转换为XHTML

(1)向每张页面的第一行添加 XHTML <!DOCTYPE>

(2)向每张页面的 html 元素添加 xmlns 属性

(3)把所有元素名改为小写

(4)关闭所有空元素

(5)把所有属性名改为小写

(6)为所有属性值加引号

二、XHTML元素

1.XHTML元素语法规则

(1)XHTML 元素必须正确嵌套

(2)XHTML 元素必须始终关闭

(3)XHTML 元素必须小写

(4)XHTML 文档必须有一个根元素

2.XHTML 元素必须正确嵌套

在 HTML 中,某些元素可以不正确地彼此嵌套在一起,就像这样:

<b><i>Thistext is bold and italic</b></i>

在 XHTML 中,所有元素必须正确地彼此嵌套,就像这样:

<b><i>Thistext is bold and italic</i></b>

3.XHTML元素必须始终关闭

这是错误的:

<p>This is aparagraph

<p>This isanother paragraph

这是正确的:

<p>This is aparagraph</p>

<p>This isanother paragraph</p>

4.空元素也必须关闭

这是错误的:

A break:<br>

A horizontal rule:<hr>

An image: <imgsrc="happy.gif" alt="Happy face">

这是正确的:

A break: <br/>

A horizontal rule:<hr />

An image: <imgsrc="happy.gif" alt="Happy face" />

5.XHTML 元素必须小写

这是错误的:

<BODY>

<P>This is aparagraph</P>

</BODY>

这是正确的:

<body>

<p>This is aparagraph</p>

</body>

三、XHTML属性

1.XHTML属性语法规则

(1)XHTML 属性必须使用小写

(2)XHTML 属性值必须用引号包围

(3)XHTML 属性最小化也是禁止的

2.XHTML 属性必须使用小写

这是错误的:

<table WIDTH="100%">

这是正确的:

<table width="100%">

3. XHTML 属性值必须用引号包围

这是错误的:

<tablewidth=100%>

这是正确的:

<tablewidth="100%">

4.禁止属性简写

这是错误的:

<inputchecked>

<inputreadonly>

<inputdisabled>

<optionselected>

这是正确的:

<inputchecked="checked" />

<inputreadonly="readonly" />

<inputdisabled="disabled" />

<optionselected="selected" />



HTML 表单

一、HTML表单

1.什么是HTML表单?

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

2. <form> 元素及其属性

(1)<form> 元素定义 HTML 表单

<form>

 .

form elements

 .

</form>

(2)<form>的属性:

<formaction="action_page.php" method="GET"target="_blank" accept-charset="UTF-8"

ectype="application/x-www-form-urlencoded"autocomplete="off" novalidate>

.

form elements

 .

</form> 

属性

描述

accept-charset

规定在被提交表单中使用的字符集(默认:页面字符集)。

action

规定向何处提交表单的地址(URL)(提交页面)。

autocomplete

规定浏览器应该自动完成表单(默认:开启)。

enctype

规定被提交数据的编码(默认:url-encoded)。

method

规定在提交表单时所用的 HTTP 方法(默认:GET)。

name

规定识别表单的名称(对于 DOM 使用:document.forms.name)。

novalidate

规定浏览器不验证表单。

target

规定 action 属性中地址的目标(默认:_self)。







3.HTML 表单包含表单元素
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等
4. <input> 元素
<input> 元素是最重要的表单元素。<input>元素有很多形态,根据不同的 type 属性
这是本章中使用的类型:

类型

描述

text

定义常规文本输入

radio

定义单选按钮输入(选择多个选择之一)

submit

定义提交按钮(提交表单)

5. 文本输入

<inputtype="text"> 定义用于文本输入的单行输入字段:

<!DOCTYPEhtml>

<html>

<body>

<form>

Firstname:<br>

<inputtype="text" name="firstname">

<br>

Lastname:<br>

<inputtype="text" name="lastname">

</form>

<p>请注意表单本身是不可见的。</p>

<p>同时请注意文本字段的默认宽度是 20 个字符。</p>

</body>

</html>

6. 单选按钮输入

<inputtype="radio"> 定义单选按钮:

<!DOCTYPEhtml>

<html>

<body>

<form>

<inputtype="radio" name="sex" value="male"checked>Male

<br>

<inputtype="radio" name="sex" value="female">Female

</form>

</body>

</html>

7. 提交按钮

<!DOCTYPEhtml>

<html>

<body>

<formaction="/demo/demo_form.asp">

Firstname:<br>

<inputtype="text" name="firstname" value="Mickey">

<br>

Lastname:<br>

<inputtype="text" name="lastname" value="Mouse">

<br><br>

<inputtype="submit" value="Submit">

</form>

<p>如果您点击提交,表单数据会被发送到名为 demo_form.asp 的页面。</p>

</body>

</html>

8.form元素的action属性

action 属性定义在提交表单时执行的动作,向服务器提交表单的通常做法是使用提交按钮。通常,表单会被提交到 web 服务器上的网页。在上面的例子中,指定了某个服务器脚本来处理被提交表单:

<formaction="action_page.php">

如果省略 action 属性,则 action 会被设置为当前页面

9.formmethod属性

method 属性规定在提交表单时所用的 HTTP 方法(GET POST):

<formaction="action_page.php" method="GET">

或:

<formaction="action_page.php" method="POST">

(1) 何时使用 GET

如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息,当您使用 GET 时,表单数据在页面地址栏中是可见的

注释:GET 最适合少量数据的提交。浏览器会设定容量限制

(2) 何时使用 POST

如果表单正在更新数据,或者包含敏感信息(例如密码),POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的

10.name属性

如果要正确地被提交,每个输入字段必须设置一个 name 属性。本例只会提交 "Last name" 输入字段:

<formaction="/demo/demo_form.asp">

Firstname:<br>

<inputtype="text" value="Mickey">

<br>

Lastname:<br>

<inputtype="text" name="lastname"value="Mouse">

<br><br>

<inputtype="submit" value="Submit">

</form>

11. <fieldset> 组合表单数据

<fieldset>元素组合表单中的相关数据,<legend>元素为 <fieldset> 元素定义标题:

<!DOCTYPEhtml>

<html>

<body>

<formaction="/demo/demo_form.asp">

<fieldset>

<legend>Personalinformation:</legend>

Firstname:<br>

<inputtype="text" name="firstname" value="Mickey">

<br>

Lastname:<br>

<inputtype="text" name="lastname" value="Mouse">

<br><br>

<inputtype="submit" value="Submit">

</fieldset>

</form>

</body>

</html>二、HTML表单元素

1.<input>元素

最重要的表单元素是<input> 元素。<input> 元素根据不同的 type 属性,可以变化为多种形态。后面着重讲解所有 HTML 输入类型
2. <select> 元素(下拉列表)

<select>元素定义下拉列表:

<!DOCTYPEhtml>

<html>

<body>

<formaction="/demo/demo_form.asp">

<selectname="cars">

<optionvalue="volvo">Volvo</option>

<optionvalue="saab">Saab</option>

<optionvalue="fiat">Fiat</option>

<optionvalue="audi">Audi</option>

</select>

<br><br>

<inputtype="submit">

</form>

</body>

</html>

<option>元素定义待选择的选项,列表通常会把首个选项显示为被选选项。您能够通过添加 selected 属性来定义预定义选项

<!DOCTYPEhtml>

<html>

<body>

<p>您可以通过 selected 属性预选择某些选项。</p>

<formaction="/demo/demo_form.asp">

<selectname="cars">

<optionvalue="volvo">Volvo</option>

<optionvalue="saab">Saab</option>

<optionvalue="fiat" selected>Fiat</option>

<optionvalue="audi">Audi</option>

</select>

<br><br>

<inputtype="submit">

</form>

</body>

</html>

3. <textarea> 元素

<textarea>元素定义多行输入字段(文本域):

<textareaname="message" rows="10" cols="30">

The cat wasplaying in the garden.

</textarea>

4.<button> 元素

<button> 元素定义可点击的按钮:

<buttontype="button" οnclick="alert('Hello World!')"> 点击我! </button>

5.HTML5表单元素

HTML5 增加了如下表单元素:

<datalist>

<keygen>

<output>

6. HTML5<datalist> 元素

<datalist>元素为<input>元素规定预定义选项列表,用户会在他们输入数据时看到预定义选项的下拉列表,<input>元素的 list 属性必须引用<datalist> 元素的 id 属性

<formaction="/demo/demo_form.asp">

<input list="browsers" name="browser">

<datalistid="browsers">

  <option value="InternetExplorer">

  <option value="Firefox">

  <option value="Chrome">

  <option value="Opera">

  <option value="Safari">

</datalist>

<inputtype="submit">

</form>

三、HTML 输入类型

1.text类型

<inputtype="text"> 定义供文本输入的单行输入字段:

<formaction="/demo/demo_form.asp">

Firstname:<br>

<inputtype="text" name="firstname">

<br>

Lastname:<br>

<inputtype="text" name="lastname">

<br><br>

<inputtype="submit">

</form>

2.password类型

<inputtype="password"> 定义密码字段:

<formaction="">

Username:<br>

<inputtype="text" name="userid">

<br>

Userpassword:<br>

<inputtype="password" name="psw">

</form>

3.submit类型

<inputtype="submit"> 定义提交表单数据至表单处理程序的按钮,表单处理程序(form-handler)通常是包含处理输入数据的脚本的服务器页面在表单的 action 属性中规定表单处理程序:

<formaction="/demo/demo_form.asp">

Firstname:<br>

<input type="text"name="firstname" value="Mickey">

<br>

Lastname:<br>

<inputtype="text" name="lastname" value="Mouse">

<br><br>

<inputtype="submit" value="Submit">

</form>

如果您省略了提交按钮的 value 属性,那么该按钮将获得默认文本:

<formaction="/demo/demo_form.asp">

Firstname:<br>

<inputtype="text" name="firstname" value="Mickey">

<br>

Lastname:<br>

<inputtype="text" name="lastname" value="Mouse">

<br><br>

<inputtype="submit">

</form>

4.radio类型

<inputtype="radio"> 定义单选按钮:

<formaction="/demo/demo_form.asp">

<inputtype="radio" name="sex" value="male"checked>Male

<br>

<inputtype="radio" name="sex" value="female">Female

<br><br>

<inputtype="submit">

</form>

5.checkbox类型

<inputtype="checkbox"> 定义复选框,复选框允许用户在有限数量的选项中选择零个或多个选项:

<formaction="/demo/demo_form.asp">

<inputtype="checkbox" name="vehicle" value="Bike">Ihave a bike

<br>

<inputtype="checkbox" name="vehicle" value="Car">Ihave a car

<br><br>

<inputtype="submit">

</form>

6.button类型

<inputtype="button> 定义按钮:

<buttontype="button" οnclick="alert('Hello World!')">ClickMe!</button>

7.HTML5输入类型

HTML5增加了多个输入类型:

color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week

8.number类型

<inputtype="number"> 用于应该包含数字值的输入字段。您能够对数字做出限制。根据浏览器支持,限制可应用到输入字段

<p>

根据浏览器支持:<br>

数值约束会应用到输入字段中。

</p>

<formaction="/demo/demo_form.asp">

  数量(1 到 5 之间):

  <input type="number"name="quantity" min="1" max="5">

  <input type="submit">

</form>

<p><b>注释:</b>IE9 及早期版本不支持 type="number"。</p>

9.输入限制

属性

描述

disabled

规定输入字段应该被禁用。

max

规定输入字段的最大值。

maxlength

规定输入字段的最大字符数。

min

规定输入字段的最小值。

pattern

规定通过其检查输入值的正则表达式。

readonly

规定输入字段为只读(无法修改)。

required

规定输入字段是必需的(必需填写)。

size

规定输入字段的宽度(以字符计)。

step

规定输入字段的合法数字间隔。

value

规定输入字段的默认值。

例:

<formaction="action_page.php">

  Quantity:

  <input type="number"name="points"

   min="0" max="100"step="10" value="30">

  <input type="submit">

</form>

10.data类型

<inputtype="date"> 用于应该包含日期的输入字段。根据浏览器支持,日期选择器会出现输入字段中

<p>

根据浏览器支持:<br>

当您填写输入字段时会弹出日期选择器。

</p>

<formaction="/demo/demo_form.asp">

  生日:

  <input type="date" name="bday">

  <input type="submit">

</form>

<p><b>注释:</b>Firefox 或者

Internet Explorer11 以及更早版本不支持type="date"。</p>

您可以向输入添加限制:

<formaction="/demo/demo_form.asp">

请输入1980-01-01 之前的日期:<br>

<inputtype="date" name="bday" max="1979-12-31"><br><br>

请输入 2000-01-01之后的日期:<br>

<inputtype="date" name="bday" min="2000-01-02"><br><br>

<inputtype="submit">

</form>

11.color类型

<inputtype="color"> 用于应该包含颜色的输入字段。根据浏览器支持,颜色选择器会出现输入字段中

<formaction="action_page.php">

  Select your favorite color:

  <input type="color" name="favcolor"value="#ff0000">

  <input type="submit">

</form>

12.range类型

<inputtype="range"> 用于应该包含一定范围内的值的输入字段。根据浏览器支持,输入字段能够显示为滑块控件:

<html>

<body>

<p>

根据浏览器支持:<br>

输入类型"range" 可显示为滑动控件。

</p>

<formaction="/demo/demo_form.asp" method="get">

  Points:

  <input type="range"name="points" min="0" max="10">

  <input type="submit">

</form>

<p><b>注释:</b>IE9 及早期版本不支持 type="range"。</p>

</body>

</html>

13.month类型

<inputtype="month"> 允许用户选择月份和年份。根据浏览器支持,日期选择器会出现输入字段中:

<html>

<body>

<p>

根据浏览器支持:<br>

当您填写输入字段时会弹出日期选择器。

</p>

<formaction="/demo/demo_form.asp">

  生日(月和年):

  <input type="month"name="bdaymonth">

  <input type="submit">

</form>

<p><b>注释:</b>Firefox 或者

Internet Explorer11 以及更早版本不支持type="month"。</p>

</body>

</html>

14.week类型

<inputtype="week"> 允许用户选择周和年。根据浏览器支持,日期选择器会出现输入字段中

<formaction="action_page.php">

  Select a week:

  <input type="week"name="year_week">

  <input type="submit">

</form>

 

15. datetime-local

<inputtype="datetime-local"> 允许用户选择日期和时间(无时区)。根据浏览器支持,日期选择器会出现输入字段中:

<p>

根据浏览器支持:<br>

当您填写输入字段时会弹出日期选择器。

</p>

<formaction="/demo/demo_form.asp">

  生日(日期和时间):

  <inputtype="datetime-local" name="bdaytime">

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

</form>

<p><b>注释:</b>Firefox 或者

Internet Explorer 不支持 type="datetime-local"。</p>

16.email类型

<inputtype="email"> 用于应该包含电子邮件地址的输入字段。根据浏览器支持,能够在被提交时自动对电子邮件地址进行验证。某些智能手机会识别 email 类型,并在键盘增加 ".com" 以匹配电子邮件输入

17.search类型

<inputtype="search"> 用于搜索字段(搜索字段的表现类似常规文本字段)

<formaction="/demo/demo_form.asp">

  搜索谷歌:

  <input type="search"name="googlesearch">

  <input type="submit">

</form>

18.tel类型

<inputtype="tel"> 用于应该包含电话号码的输入字段。目前只有 Safari 8 支持 tel 类型

<formaction="action_page.php">

  Telephone:

  <input type="tel"name="usrtel">

  <input type="submit">

</form>

19.url类型

<inputtype="url"> 用于应该包含 URL 地址的输入字段。根据浏览器支持,在提交时能够自动验证 url 字段。某些智能手机识别 url 类型,并向键盘添加 ".com" 以匹配 url 输入

<formaction="action_page.php">

  请添加您的首页:

  <input type="url"name="homepage">

  <input type="submit">

</form>
四、HTML 输入属性

1.value属性

value 属性规定输入字段的初始值:

<formaction="">

First name:<br>

<inputtype="text" name="firstname" value="John">

<br>

Lastname:<br>

<inputtype="text" name="lastname">

</form>

2. readonly 属性

readonly属性规定输入字段为只读(不能修改):

<formaction="">

Firstname:<br>

<inputtype="text" name="firstname" value ="John" readonly>

<br>

Lastname:<br>

<inputtype="text" name="lastname">

</form>

readonly属性不需要值。它等同于readonly="readonly"

3.disabled属性

disabled属性规定输入字段是禁用的。被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交

<formaction="">

Firstname:<br>

<inputtype="text" name="firstname" value ="John" disabled>

<br>

Lastname:<br>

<inputtype="text" name="lastname">

</form>

disabled属性不需要值。它等同于disabled="disabled"

4. size属性

size 属性规定输入字段的尺寸(以字符计):

<formaction="">

Firstname:<br>

<inputtype="text" name="firstname" value ="John" size="40">

<br>

Lastname:<br>

<inputtype="text" name="lastname">

</form>

5. maxlength 属性

maxlength属性规定输入字段允许的最大长度:

<formaction="">

Firstname:<br>

<inputtype="text" name="firstname" maxlength="10">

<br>

Lastname:<br>

<inputtype="text" name="lastname">

</form>

如设置 maxlength 属性,则输入控件不会接受超过所允许数的字符。该属性不会提供任何反馈。如果需要提醒用户,则必须编写 JavaScript 代码

6. HTML5 属性

HTML5 为 <input> 增加了如下属性:

autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、width、list、min、max、multiple、pattern (regexp)、placeholder、required、step

并为<form> 增加如需属性:

autocomplete

novalidate

7. autocomplete 属性(<form>)

autocomplete属性规定表单或输入字段是否应该自动完成。当自动完成开启,浏览器会基于用户之前的输入值自动填写值,autocomplete 属性适用于 <form> 以及如下 <input> 类型:text、search、url、tel、email、password、datepickers、range 以及color

提示:您可以把表单的autocomplete 设置为 on,同时把特定的输入字段设置为 off,反之亦然。

<form action="/example/html5/demo_form.asp"method="get" autocomplete="on">

Firstname:<input type="text" name="fname" /><br />

Last name:<input type="text" name="lname" /><br />

E-mail: <inputtype="email" name="email" autocomplete="off"/><br />

<inputtype="submit" />

</form>

<p>填写并提交表单,然后重新加载该页面,看看自动完成功能是如何工作的。</p>

<p>注意,表单的自动完成功能是打开的,但是 e-mail 字段的自动完成功能是关闭的。</p>

8. novalidate 属性(<form>)

novalidate 属性属于 <form> 属性。如果设置,则 novalidate 规定在提交表单时不对表单数据进行验证

<formaction="/example/html5/demo_form.asp" method="get" novalidate="novalidate">

E-mail: <inputtype="email" name="user_email" />

<inputtype="submit" />

</form>

若不设置,则:

9. autofocus 属性

autofocus属性是布尔属性。如果设置,则规定当页面加载时 <input> 元素应该自动获得焦点

<form action="demo_form.asp">

  First name: <input type="text"name="fname" autofocus><br>

  Last name: <input type="text"name="lname"><br>

  <input type="submit">

</form>

10. form 属性

form 属性规定 <input> 元素所属的一个或多个表单

提示:如需引用一个以上的表单,请使用空格分隔的表单 id 列表

<formaction="/example/html5/demo_form.asp" method="get"id="form1">

First name:<input type="text" name="fname" /><br />

<inputtype="submit" value="提交" />

</form>

<p>下面的 "Last name" 字段位于 form 元素之外,但仍然是表单的一部分。</p>

Last name:<input type="text" name="lname" form="form1"/>

 

11. formaction 属性

formaction属性规定当提交表单时处理该输入控件的文件的 URL。formaction属性覆盖 <form> 元素的 action 属性。formaction 属性适用于 type="submit" 以及 type="image"

<formaction="/example/html5/demo_form.asp" method="get">

First name:<input type="text" name="fname" /><br />

Last name:<input type="text" name="lname" /><br />

<inputtype="submit" value="提交" /><br />

<inputtype="submit" formaction="/example/html5/demo_admin.asp"value="以管理员身份提交"/>

</form>

12. formenctype 属性

formenctype属性规定当把表单数据(form-data)提交至服务器时如何对其进行编码(仅针对 method="post" 的表单)。formenctype 属性覆盖 <form>元素的 enctype 属性。formenctype 属性适用于 type="submit" 以及 type="image"

<formaction="/example/html5/demo_post_enctype.asp"method="post">

  First name: <input type="text"name="fname" /><br />

<inputtype="submit" value="提交" />

<inputtype="submit" formenctype="multipart/form-data"value="以Multipart/form-data 编码提交" />

</form>

13. formmethod 属性

formmethod属性定义用以向 actionURL 发送表单数据(form-data)的 HTTP 方法。formmethod 属性覆盖 <form> 元素的 method 属性。formmethod 属性适用于 type="submit" 以及 type="image"

<formaction="/example/html5/demo_form.asp" method="get">

  First name: <input type="text"name="fname" /><br />

  Last name: <input type="text"name="lname" /><br />

<inputtype="submit" value="提交" />

<inputtype="submit" formmethod="post" formaction="/example/html5/demo_post.asp"value="使用 POST 提交" />

</form>

14. formnovalidate 属性

novalidate属性是布尔属性。如果设置,则规定在提交表单时不对 <input> 元素进行验证。formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。

formnovalidate 属性可用于 type="submit"

<formaction="/example/html5/demo_form.asp" method="get">

E-mail: <inputtype="email" name="userid" /><br />

<inputtype="submit" value="提交" /><br />

<inputtype="submit" formnovalidate="formnovalidate"value="进行没有验证的提交"/>

</form>

15. formtarget 属性

formtarget属性规定的名称或关键词指示提交表单后在何处显示接收到的响应

formtarget 属性会覆盖 <form> 元素的 target 属性。formtarget 属性可与 type="submit" 和 type="image"使用

<formaction="/example/html5/demo_form.asp" method="get">

  First name: <input type="text"name="fname" /><br />

  Last name: <input type="text"name="lname" /><br />

<inputtype="submit" value="提交" />

<inputtype="submit" formtarget="_blank"value="提交到新窗口/选项卡" />

</form>

16. height 和 width 属性

height 和 width 属性规定 <input> 元素的高度和宽度height 和 width 属性仅用于<input type="image">请始终规定图像的尺寸,如果浏览器不清楚图像尺寸,则页面会在图像加载时闪烁

<formaction="/example/html5/demo_form.asp" method="get">

  First name: <input type="text"name="fname" /><br />

  Last name: <input type="text"name="lname" /><br />

  <input type="image"src="/i/eg_submit.jpg" alt="Submit" width="128" height="128"/>

</form>

17. list 属性

list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项

<inputlist="cars" />

<datalistid="cars">

      <option value="BMW">

      <option value="Ford">

      <option value="Volvo">

</datalist>

18. min 和 max 属性

min 和 max 属性规定 <input> 元素的最小值和最大值。min 和 max 属性适用于如需输入类型:number、range、date、datetime、datetime-local、month、time 以及 week

<formaction="/example/html5/demo_form.asp" method="get">

Points: <inputtype="number" name="points" min="0"max="10" />

<inputtype="submit" />

</form>

19. multiple 属性

multiple属性是布尔属性。如果设置,则规定允许用户在 <input> 元素中输入一个以上的值。multiple 属性适用于以下输入类型:email 和 file

<formaction="/example/html5/demo_form.asp" method="get">

选择图片:<inputtype="file" name="img"multiple="multiple" />

<inputtype="submit" />

</form>

20. placeholder 属性

placeholder属性规定用以描述输入字段预期值的提示(样本值或有关格式的简短描述)。该提示会在用户输入值之前显示在输入字段中。placeholder 属性适用于以下输入类型:text、search、url、tel、email 以及password

<formaction="/example/html5/demo_form.asp" method="get">

<inputtype="search" name="user_search" placeholder="SearchW3School" />

<inputtype="submit" />

</form>

21. required 属性

required属性是布尔属性。如果设置,则规定在提交表单之前必须填写输入字段

required 属性适用于以下输入类型:text、search、url、tel、email、password、datepickers、number、checkbox、radio、and file

<formaction="/example/html5/demo_form.asp" method="get">

Name: <inputtype="text" name="usr_name" required="required"/>

<inputtype="submit" value="提交" />

</form>

22. step 属性

step 属性规定 <input> 元素的合法数字间隔。示例:如果 step="3",则合法数字应该是 -3、0、3、6、等等。

提示:step 属性可与 max 以及 min 属性一同使用,来创建合法值的范围。

step 属性适用于以下输入类型:number、range、date、datetime、datetime-local、month、time 以及 week

<formaction="/example/html5/demo_form.asp" method="get">

<inputtype="number" name="points"step="3" />

<inputtype="submit" />

</form>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值