html5学习笔记（四）增强的表单

来源：互联网发布：工业作图软件编辑：程序博客网时间：2024/05/16 04:46

3.1 form元素

学习要点：form元素及其属性

form元素

用来定义一个表单，是建立表单的基础元素，（就类似定义表格的table）
表单的其他元素包含在form元素中，其主要子元素有：input/button/select......

form元素的属性

action：指定表单内容的发送到哪里（服务器地址或URL）
method:表单数据发送至服务器的方法，默认为get。常用的有两种：get/post

例子：

<!DOCTYPE html><html lang="ch-zn"> <head>  <title></title>  <meta charset="utf-8">  <meta name="author" content="liyue">  <style type="text/css">  </style> </head> <body>  <form action="http://managerx.biddingx.com/" method="post"target="_blank"><br>  <p style="text-align:center;">  用户名：<input type="text" name="用户名"><br>  密 码：<input type="password" name="密码"><br>   <p style="text-align:center;"><input type="submit"></p>   </p></form> </body></html>

<formaction=”表单内容发送到的地址”method=”post” target=”_blank”>

<pstyle="text-align:center;">

用户名：<input type="text" name="用户名"><br>

密&nbsp码：<inputtype="password" name="密码"><br>

</p>

</form>

get和post提交的区别

get方法提交，数据会附在网址之后主动提交给服务器
post方法提交，数据不会附在网址后，会将数据打包发送给服务器，等候服务器来读取数据进行处理

3.2 input元素

学习要点:input元素及其属性

input元素

用来设置表单中的内容项，比如输入内容的文本框，按钮等
不仅可以布置在表单中，也可以在表单之外的元素使用

input元素的属性

type属性：指定输入内容的类型，默认为text:单行文本框

用户名：<input type="text" name="user" >

name属性:输入内容的识别名称，传递参数时候的参数名称

用户名：<input type="text" name="user"value="请输入用户名">

value属性:默认值

用户名：<input type="text" name="user"value="请输入用户名">

placeholder：添加文案，输入时会消失，其实就是文本框默认的文案

maxlength:输入的最大字数

用户名：<input type="text" name="user"value="请输入用户名"maxlength="6">

readonly属性：只读属性，设置内容不可变更，提交时会以前发送至服务器

国籍：<input type=”text” readonly=”readonly” value=”中国” name=”gj”>

disabled属性：设置为不可用（不可操作）不会提交到服务器

地址示例：<input type=”text” value=”xxx省xxx市xxx区xxx街” disabled=”disabled” name=”dizhi”>

required属性：设置该内容为必须填写项，否则无法提交

用户名：<inputtype="text" name="user" placeholder="请输入用户名" maxlength="10"required="">

placeholder属性：设置默认值，当文本框获得焦点时被清空，对text/url/tel/email//password/search有效

autocomplet属性：属性值为on/off,定义是否开启浏览器自动记忆功能

默认是on；

autofocus属性：自动获得焦点

accesskey属性：指定快捷键windows中，指定快捷键后，按Alt+“快捷键”,便会获得焦点

tabindex属性：指定按Tab键时，项目间的移动顺序

type属性值

默认为text

password：密码状态输入

submit:提交按钮，点击将数据发送至服务器

默认是“提交”，通过value属性可以改为其他：<input type=”submit” value=”ok”>

reset:重置按钮，默认为“重置”通过input的value属性改变默认值：

button:普通按钮,默认是一个框，没有字符，通过input的value属性可设置值：

image：图片式提交按钮功能和submit一样，点击后提交数据到服务器，也就是form中的action地址。

hidden；隐藏字段

n 该内容不会显示页面上

n 一般为网页设计者设置的变量数据，提交时，隐藏内容会提交到服务器

关于hidden暂时只了解这么多，以后用到的时候再详细说

email:表示要输入一个电子邮箱

· 这是HTML5新增的元素

· 他会对输入内容进行验证，在之前需要编写大段的JS代码来进行这项工作

· 浏览器版本比较低的话有可能不支持，不同的浏览器提示的效果可能有差异

url:表示要输入一个网址

这是HTML5新增的元素
他会对输入内容进行验证必须是http/HTTPS开头才行，在之前需要编写大段的JS代码来进行这项工作
浏览器版本比较低的话有可能不支持，不同的浏览器提示的效果可能有差异

tel:表示输入的内容是一个电话号码

没有特殊效果，但是点击该框输入法自动跳转到数字输入；

这是HTML5新增的元素
他不会对输入内容进行验证
浏览器版本比较低的话有可能不支持，不同的浏览器提示的效果可能有差异

number:

购买数量：<input type=”number” min=”1” max=”10” step=”10” value=”3” name=”haha”>
- 这是HTML5新增的
- 可以配合input的max/min/step/value规定允许输入的最大值/最小值/步长/默认值
- 浏览器版本比较低的话有可能不支持，不同的浏览器提示的效果可能有差异

range(活动条)

<input type=”range” min=”1” max=”10” step=”1” name=”h”>
- 这是HTML5新增的；与number类型类似，也是表示一定范围的数值输入，但是以一个活动条的状态显示
- 可以配合input的max/min/step/value规定的最大值/最小值/步长/默认值
- 浏览器版本比较低的话有可能不支持，不同的浏览器提示的效果可能有差异

时间类

这是HTML5新增的；
包括datetime(utc时间)/datetime-local/date/month/week/time
浏览器版本比较低的话有可能不支持，不同的浏览器支持程度不同

color

这是HTML5新增的；
可以建立一个颜色的选择输入框
浏览器版本比较低的话有可能不支持，不同的浏览器支持程度不同

<formaction="" method="" target="">  颜色：<input type="color"value="red"><br>  time：<input type="time"> <br>  week：<input type="week"><br>  month:<inputtype="month"><br>  date:<inputtype="date"><br> datetime-local:<input type="datetime-local"  ><br> datetime:<input type="datetime">  </form>

search

这是HTML5新增的；
用于建立一个搜索框，用来供用户输入搜素的关键词，和text区别是：search可以清空输入内容
浏览器版本比较低的话有可能不支持，不同的浏览器支持程度不同

file

用来创建一个文件选取的输入框
可通过accept属性规定选取文件的类型，比如图片/视频

<input type=”file” accept=”image/png”>选择png格式的图片，打开文件时只会显示该格式的图片。默认只能够选择一个图片/视频等

multipe属性可以设定一次允许选择多个文件

< input type=”file” accept=”image/gif” multiple=”multipe”>

checkbox/复选框

用来创建一个复选框（可以多项选择）

通过checked属性可讲某个选项设为默认的选取状态，再次单击取消选取
例子：<input type=”checkbox” name=”a” value=”aa” checked>

例子：

 <form action="" method="get">  <h3>你想学习的计算机技术是：</h3>  <input type="checkbox" name="a"value="aa">sql 2008  <input type="checkbox" name="b"value="bb">html5  <input type="checkbox" name="c"value="cc">java  <input type="checkbox" name="d"value="dd">c++  <input type="submit" value="提交你的答案"> </form>

radio/单选框

用来创建一个单选框（可以多项选择）
通过checked属性可讲某个选项设为默认的选取状态，再次单击取消选取
必须将同一组单选项设置一个相同的name属性值,否则就不能单选，所有都可以选择，同一组name名字必须一样才是才是单选。

  <h3>您是先生or女士？</h3>  <formaction="" method="get" target="_blank">   <inputtype="radio" name="a" value="a">女士   <inputtype="radio" name="a" value="b">男士    <inputtype="radio" name="a" value="c">保密  </form>

3.11 select与HTML5新增的datalist元素

select元素

用来建立一个下拉菜单选项列表
不仅可以在表单中使用，还可以在其他块元素和内联元素中使用
select只是定义一个下拉菜单列表，其具体列表项要通过option元素建立
- option元素可以用来建立一个选项，即下拉列表的一个菜单项

例子：

<form action=""method="" target="_blank">  <select>   <option value=”html”  name="a">HTML</option>   <option value=”html5” name="b">HTML5</option>  </select> </form>

发送到服务器的是value里面的内容。

optgroup元素用来对option元素进行组合分组

<form action=""method="" target="_blank">  <select><optgroup>      <option value=”html”  name="a">HTML</option>      <option value=”html5” name="b">HTML5</option>   </optgroup>  </select></form>

size用来定义列表中显示的列表项
multiple属性用来定义是否可以多选

   <form action=""method="" target="_blank">   <selectname="myselect" size="5"multiple>   <optgroup>    <optionvalue="a">HTML</option>    <optionvalue="b">HTML5</option>    <optionvalue="c">javascript</option>    <optionvalue="d">java</option>   </optgroup>  </select>   <input type="submit"value="ok"  </form>

可以添加disabled属性和autofocus属性

<selectname="myselect" size="2" multiple autofocus disabled>

datalist元素

HTML5新增元素，用来建立一个选项列表
datalist元素的内容不会直接显示在网页上，只是会在用户输入时作为候选项
通常与input元素配合使用list值和datalist的id值绑定

<form action=""method="">    <input type="text"name="aa" list="hh">    <datalist id="hh">         <option value="html5">html5</option>     <option value="java">java</option>     <option value="c++">c++</option>     <option value="c#">c#</option>    </datalist>   <inputtype="submit">  </form>

//id值和list值要一样才能把input元素和datalist元素绑定起来

option 内的value值是显示的值，所以value值和外面要一样

3.13 表单的新增属性

HTML5新增表单属性

之前课程中已经接触过的新增属性：autocomplete属性/autofocus属性/list属性/multiple属性/placeholder属性/required属性/min/max/step属性
- form属性:将表单外的内容与表单进行关联

用户名：<input type=”text” name=”user” placeholder=”请输入用户名” >

</form>

密码：<input type=”password” name=”pw”form=”a” required>

<form>外的元素不会提交，要通过id和form 属性绑定后，才会一起提交

novalidate属性：设置数据提交时不进行验证
enctype属性：仅作了解规定在发送到服务器之前应该如何对表单数据进行编码。通常情况下我们使用默认值即可
accept-charset属性：仅作了解accept-charset 属性规定服务器处理表单数据所接受的字符集。 accept-charset 属性允许您指定一系列字符集，服务器必须支持这些字符集，从而得以正确解释表单中的数据。通常情况下我们使用默认值即可此属性的默认值是 "unknown"，表示表单的字符集与包含表单的文档的字符集相同。

3.14 label元素和label属性

学习要点

掌握label元素的使用
掌握label属性的使用

label元素

· 用来为 input 元素定义标注（标记）,建立一个与之相关联的标签

for属性，让标签与指定的input元素建立关联

例子：点击字也能选中或取消这个选项

    <input type="checkbox"name="a" id="a">       <label for="a">苹果</label>    <input type="checkbox" name="b" id="b">       <label for="b">桃子</label>                  inform加id属性，label加for属性就能把两个绑定起来了

将input元素包含在label标签中，直接把input标签放在<label></label>中

   <h3>你性别：</h3>     <label><inputtype="radio" name="a" form="aa">男</label>    <label><input type="radio" name="a"form="aa">女</label>    <label><input type="radio" name="a"form="aa">保密</label>

可以通过accesskey建立快捷键

label属性

· 在option元素中可以设定比标签内容更优先的选项

· optgroup的分组名称

<h3>你最喜欢吃的水果：</h3>  <form action=""method="get">   <select name="a">    <optgroup label="水果">     <optionvalue="ap">苹果</option>     <option value="aq">栗子</option>     <optionvalue="aw">梨子</option>   </optgroup>   <optgroup label="鱼类">     <optionvalue="aa">草鱼</option>     <optionvalue="ad">水鱼</option>     <optionvalue="az">鱿鱼</option>   </optgroup>   </select>  </form>

3.15 textarea元素

textarea元素

· 用来建立多行输入文本框

· 元素标签中的内容将一文本框默认值的形式呈现

· 不仅可以用在表单中，也可以在其他块元素或内联元素中

· textarea元素的属性：

name/disabled/readonly/form/reauired/autofocus/placeholder属性，这些属性的用法之前课程中已经有讲解，就不再一一演示
rows属性：设置多行文本的行数（高度）
cols属性：设置多行文本的每行显示的字数（宽度）

补充内容，input元素的size属性

  <form action="" method="get" size="30">   用户名：<input type="text"><br><br>   意见：<textarea rows="5" cols="30"placeholder="请输入内容，谢谢参与。" name="yj" required style="background:#F0F8FF;"></textarea><br><br>   <inputtype="submit" value="提交"><inputtype="reset" value="重置">  </form>

3.16 button元素

button元素

在form表单内就用<inputtype=”submit”>

在form表单外就用<button></button>

用来建立一个按钮从功能上来说，与input元素建立的按钮相同
button元素是双标签，其内部可以配置图片与文字，进行更复杂的样式设计
不仅可以在表单中使用，还可以在其他块元素和内联元素中使用
button元素的属性
- type属性：可以设置三个值 submit/reset/button与input元素设置的按钮含义相同
- name/vlue/disable属性：与input的用法相同
- autofocus属性：设置按钮自动获得焦点。
- form属性：设定按钮隶属于哪一个或多个表单
- formmethod属性：设定表单的提交方式，将覆盖原本的提交方式
- formnovalidate属性：设定表单将会覆盖原本的novalidate属性
- fomaction属性：指定表单数据发送对象，将覆盖原来的action属性设定
- formenctype属性;指定表单的数据发送类型，将覆盖原本的enctype属性设定
- formtarget属性：将覆盖原本的target属性设定

重要事项：如果在表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 button元素开始标签与结束标签之间的文本，而其他浏览器将提交 value 属性的内容。最好就是在表单中使用 input元素来创建按钮。其他地方使用button创建按钮

表单与PHP

处理get请求：

下面是service.php源码：（PHP用来处理前端提交的表单内容，处理get请求）

<!DOCTYPE html><html lang="ch-zn"> <head>   <meta charset="utf-8">   <title>service.php</title>   <meta name="author" content="liyue">   <meta name="keywords" content="php,html"> </head> <body>   <?php     if(isset($_GET['user'])&&$_GET['user']){         echo 'hello '.$_GET['user'];   }else{         echo '请输入名字';   }   ?> </body></html>

下面是HTML表单：

 <!DOCTYPE html><html lang="zh-cn"> <head> <title></title> <meta charset="utf-8"> <meta name="author" content="liyue"> <meta name="keywords" content="html,js"> <style type="text/css"> </style> </head> <body>  <form action="service.php"method="get">    user:<input type="text"name="user"><br><br>    inte:<label><input type="radio" name="inte"value="run">run</label>          <input type="radio"name="inte" value="ball" id="aa"><labelfor="aa">ball</label><br><br>    <input type="submit" value="提交">  </form> </body></html>

处理post请求：

在客户端传两个参数，由服务器进行相加处理：

add.php:

 <!DOCTYPE html><htmllang="zh-cn"> <head>  <title>add</title>  <meta charset="utf-8"> </head> <body>   <?php   if($_POST['a']&&$_POST['b']){      echo$_POST['a']+$_POST['b'];     }else{      echo 'input two mumber';     }   ?> </body></html>

post.html:

<!DOCTYPE html><htmllang="zh-cn"> <head>  <title></title>  <meta charset="utf-8">  <meta name="author"content="liyue">  <meta name="keywords"content="html,js">  <style type="text/css">  </style> </head> <body>   <formaction="add.php" method="post">     a:<input type="text" name="a"><br>     b:<input type="text"name="b"><br>     <input type="submit"value="ok">   </form> </body></html>

图片上传流程：

upload.html：

<!DOCTYPEhtml><htmllang="ch-zn">  <head>   <title>upload</title>   <meta charset="utf-8">  </head>  <body>   <form action="upload.php"method="post" enctype="multipart/form-data">     <!--如果表单中file以二进制传输的话要指明form的enctype-->     选择图片：<input type="file"name="file" accept="image/png"><br>     <input type="submit"value="ok">   </form>  </body></html>

upload.PHP（获取数组信息）

<!DOCTYPEhtml><htmllang="ch-zn">  <head>     <title>upload.php</title>     <meta charset="utf-8">  </head>  <body>     <?php       print_r($_FILES);/*传的所有文件都会上传到$_FILES这个数组中*/     ?>  </body></html>

上传file后，数组输出内容如下：

Array(    [file] => Array        (            [name] => haha a.png   //文件名字            [type] => image/png     //文件类型            [tmp_name] => /tmp/phpcnkPjB  // 临时文件存放的目录，我们上传文件会生成一个临时目录存放这个文件，在我们这个PHP页面结束后自动释放掉。接下来呢我们要把这个临时文件移出来，否则被释放掉，可以移到PHP当前的目录，以这个文件的名字来存放。下面就是这个程序实现方法：            [error] => 0            [size] => 359385        ) )

服务器代码：

     <?php       $file = $_FILES['file'];//首先获取这个文件地址       $fileName = $file['name']； //再获取这个文件名      move_uploaded_file($file['tmp_name'],$fileName); //然后把这个文件移到当前的目录。第一个参数是临时文件地址，第二个参数地址是移到哪里去的地址(当前目录)       echo "<imgsrc='$fileName'>"; //把图片输出来     ?>

3.17 新增的表单重写

学习要点

对form元素的属性做一个小结，对个别属性进行一点补充
重点掌握新增的表单重写

form元素的属性小结

action/method/enctype/name/accept-charset/accept/target/autocomplete/novalidate
accept属性：（仅作了解）指定服务器处理表单时所能接受的数据形态，一般默认即可
accept-charset: （仅作了解）指定表单处理数据时所能接受的字符编码
target属性:指定在何处打开action属性所指定的URL目标
enctype属性：(了解即可)规定在发送到服务器之前应该如何对表单数据进行编码。

当method设定发送方式为get时，不必设置该属性；
当method设定发送方式为post时该属性才有效；
默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。
当值设为"multipart/form-data"时表示：不对字符编码。在使用包含文件上传控件的表单时（比如当input的type值为file时），必须使用该值。
text/plain:空格转换为 "+" 加号，但不对特殊字符编码。（了解）

表单的重写：重写 form 元素的某些属性设定。

表单重写属性适用于提交按钮

formaction - 重写表单的 action 属性
formenctype - 重写表单的 enctype 属性
formmethod - 重写表单的 method 属性
formnovalidate - 重写表单的 novalidate 属性
formtarget - 重写表单的 target 属性

<inputtype=”submit” formaction=”xxx” formmethod=”post”>

button元素

用来建立一个按钮从功能上来说，与input元素建立的按钮相同
button元素是双标签，其内部可以配置图片与文字，进行更复杂的样式设计
不仅可以在表单中使用，还可以在其他块元素和内联元素中使用

button元素的属性
- type属性：可以设置三个值 submit/reset/button与input元素设置的按钮含义相同
- name/vlue/disable属性：与input的用法相同
- autofocus属性：设置按钮自动获得焦点。
- form属性：设定按钮隶属于哪一个或多个表单
- formmethod属性：设定表单的提交方式，将覆盖原本的提交方式
- formnovalidate属性：设定表单将会覆盖原本的novalidate属性
- fomaction属性：指定表单数据发送对象，将覆盖原来的action属性设定
- formenctype属性;指定表单的数据发送类型，将覆盖原本的enctype属性设定
- formtarget属性：将覆盖原本的target属性设定

重要事项：如果在表单中使用button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 button元素开始标签与结束标签之间的文本，而其他浏览器将提交 value 属性的内容。最好就是在表单中使用 input 元素来创建按钮。其他地方使用button创建按钮

3.18 新增的output元素

output元素：数据的输出

output元素是HTML5新增的元素，用来设置不同数据的输出
output元素的输出内容是由代码控制的
这节课的演示需要用到简单的javascript知识,暂时不理解没关系，主要是了解output元素的使用方法，后边的课程中我们安排了专门的章节讲解javascript
output元素的属性：
- name属性：定义对象的唯一名称。（表单提交时使用）
- form属性：定义所属的一个或多个表单。
- for属性：定义输出域相关的一个或多个元素。

· 案例演示需要用到两个没有学过的知识，表单事件

oninput表单事件：当用户对元素数据的输入时触发
parseInt() 是一个javascript函数，它可以解析一个字符串，并返回一个整数。

例子如下：

<form action="" method="get"oninput="num.value=parseInt(num1.value)+parseInt(num2.value)">    oninput放在form标签内，表示<inputtype="number" name="num1" id="num1">+<inputtype="number" name="num2" id="num2">=<outputname="num" for="num1 num2"></output></form>

3.19 新增的progress/meter元素

progress元素

是HTML5中新增的元素，用来建立一个进度条
通常与JavaScript 一同使用，来显示任务的进度。
使用时注意浏览器的支持情况：Internet Explorer 9 以及更早的版本不支持

progress元素的属性：
- max属性：规定当前进度的最大值。
- value属性设定进度条当前默认显示值
- form属性：规定进度条所属的一个或多个表单。

例子：

<p>当前下载进度：</p>   <form action=""method="" id="form">     <progress max="100"  value="30"  title="haha">   </form>

meter元素

是HTML5中新增的元素，用来建立一个度量条,用来表示度量衡的评定
通常与JavaScript 一同使用，来显示任务的进度。

meter元素的属性：
- value属性设定进度条当前默认显示值
- max属性：规定范围的最大值，默认值为1.
- min属性：规定范围的最小值，默认值为0.
- low属性：规定被视作低的标准。
- high属性：规定被视作高标准。
- form属性：规定所属的一个或多个表单。
- optimum属性：定义度量条的最佳标准值。low值< 标准值 <high值

例子：

<form action=""method="" id="form">     <!--<progress max="100"value="30" title="haha">-->      低：<meter max="100"min="0" value="30" high="80"low="30"></meter>      高：<meter max="100"min="0" value="90" high="80"low="30"></meter>      中：<meter max="100"min="0" value="60" high="80"low="30"></meter>   </form>

3.20 fieldset/legend与新增的keygen元素

fieldset元素：可将表单内的相关元素分组。

当一组表单元素放到fieldset标签内时，浏览器会以特殊方式来显示它们，通常会有一个边框。
没有必需的或唯一的属性。form/disabled属性可用。

legend元素：为 fieldset 元素定义标题

<legend>框框的标题</legend>

框中的代码。。。。

</fieldset>

不一定只用在表单内部，用在其他也行的。。。。。。。

例子：：

<form action="" method="get">      <fieldset>  --》边框       <legend>    --》标题         <p>用户注册</p>       </legend>      <p>        <label>账号：<input type="text" name="user"></label>      </p>      <p>        <label>密码：<input type="password" name="pw"></label>      </p>      <button type="submit">提交</button>      </fieldset>    </form>

keygen元素

是HTML5中新增的元素，用来建立一个密钥生成器
当提交表单时，私钥存储在本地，公钥发送到服务器。主要作用是提供一种用户验证身份的方法
使用时注意不同浏览器支持程度不同；目前Internet Explorer 和 Safari暂不支持
因为涉及到服务器的一些知识，本节课我们近对该元素了解即可，和服务器相关的知识不在本套课程范围内。

keygen元素元素的属性：

name/form/autofocus/disabled
challenge属性:将 keygen 的值设置为在提交时询问。
keytype属性：定义密钥类型，如设置为rsa（一种密码的算法），则生成 RSA 密钥。

了解内容，非本课程内容，有兴趣的同学课下课自己查阅相关资料：RSA是目前最有影响力的公钥加密算法，它能够抵抗到目前为止已知的绝大多数密码攻击，已被ISO推荐为公钥数据加密标准。

   <form action=""method="get">    账号：<input type="text"name="user">     加密：<keygen name="mykey">     <p><inputtype="submit"></p>   </form>

3.21 小结与其他新增元素

学习要点

了解新增的input属性pattern
其他几个新增元素（非表单中元素，但是也放在这里讲解）

新增的input属性pattern：设定输入类型的正则表达式;关于正则表达式的内容将在后续javascript的课程中进行讲解。

type属性值是URL、email会有类似的提示，如果其他如学号、邮政编码等也要规定输入格式则用pattern属性设置正则表达式pattern=”[a-d]{3}”

<form action="" method="get"id="form">     <fieldset>       <legend>表单</legend>        请输入你的学号：<input type="text" name="xuehao" pattern="[0-9]{4}" placeholder="只能输入4个数字且在0到9">     </fieldset>   </form>   <button type="submit"form="form">提交</button>

1. 以下几个元素虽然放在表单这一章来讲，并非表单中的元素

目前所有主流浏览器都不支持的menu标签和目前只有 Internet Explorer 支持command标签暂时不做讲解。

details/summary元素也是两个新增的元素，浏览器支持程度相对前两个较好，且用处较广，我们对其进行相对详细的解

虽然将这个元素放在表单这一章来讲解，但是它可以用在其他更多的场景中，比如导航菜单等
details元素：用于描述文档或文档某个部分的细节。
- 通常与summary元素配合使用，可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details中的内容。
details元素的属性：
- open属性：规定在 HTML 页面上 details 是可见的。
目前还不是所以浏览器都支持，但是相信以后都会支持的

默认是不展开的，添加open 属性后就是默认展开了。

<fieldset>     <legend>外面的框框</legend>       <detailsopen="open">       <summary>点击率</summary>  添加标题        <p>该文章目前点击率：6000</p>        <ul>                <li>8000以上：很火<metermax="100" mix="0" value="90" high="90"low="30"></meter></li>                <li>3000--8000：一般<metermax="100" min="0" value="50" high="90"low="30"></meter></li>                <li>3000以下：人气不高啊<metermax="100" min="0" value="10" high="90"low="30"></meter></li>        </ul>       </details>   </fieldset>

<legend>框框的标题</legend>

框中的代码。。。。

</fieldset>

不一定只用在表单内部，用在其他也行的。。。。。。。

<summary>显示的标题</summary>

列表的内容代码。。。。（默认收起）

</details>

不一定只用在表单内部，用在其他也行的。。。。。。。

   div{      position:relative;      width:200px;      height:60px;      =====>通用的样式代码      background:#ddd;       border-left:5pxsolid deeppink;  }

参考链接

3.22综合实例

 <style type="text/css"> form{width:500px;background:#9370DB;padding:10px;margin-top:150px;margin-left:500px;}   button{background:#808080(在页面显示的颜色);padding:8px（button内边距）;border-radius:5px;（圆角）}   button:hover{padding:10px;background:#2f4f4f（鼠标点击时显示的颜色）;border-radius:5px;}   input{padding:8px;background:#f8f8f8（在页面显示的颜色）;}   input:focus{padding:8px;(表单框的内边距) background:#ffc0cb(鼠标点击时显示的颜色);} </style> </head> <body>  <form action="" method="get">    <fieldset>    <legend>注册</legend>    <p>     <label>账号：<input type="text" name="user" required placeholder="账号" ></label>    </p>    <p>     <label for="aaa">密码：</label><input type="password"name="pw" placeholder="密码" id="aaa" required>    </p>    <p>     <label>电话号码：<input type="tel" name="tel"placeholder="电话" required maxlength="11"></label>    </p>    <p>     <label>电子邮件：<input type="email" name="email"placeholder="电子邮件" required></label>    </p>    <p>     <label>邮政编码：<input type="text" name="postm"pattern="[0-9]{6}" placeholder="邮政编码"></label>    </p>    <p>      <label><inputtype="checkbox" name="jz" value="pw">记住密码</label>       <input type="checkbox" name="zd"value="zd" id="af"><label for="af">自动登录</label>    </p>    <button type="submit">注册</button>    </fieldset>  </form>

0 0