html5学习笔记(四)增强的表单

时间:2022-04-30 14:35:57

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>
html5学习笔记(四)增强的表单

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

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

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

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

   <input type="submit">

   </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=”xxxxxxxxxxxx” disabled=”disabled” name=”dizhi”>

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

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

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

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

  默认是on

  <input type=”text” name=”user”placeholder=”请输入姓名” autocomplet=”off”>

autofocus属性:自动获得焦点

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

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

type属性值

默认为text

password:密码状态输入

html5学习笔记(四)增强的表单

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

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

html5学习笔记(四)增强的表单

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

 <input type="reset" value="清空">

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

<input  type=”button”value=”ok”>

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

<input type=”image” src=”**” width=”40px” height=”40px” alt=””title=””>

hidden;隐藏字段

n   该内容不会显示页面上

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

<input   type=”hidden”   name=”_token”   value=”fsdfhsaklfhalsfhfaeiurh lahfiaeuweif”>

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

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

   <input  type=”email” name=”email” requiredplaceholder=”请输入邮箱地址”>

·        这是HTML5新增的元素

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

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

html5学习笔记(四)增强的表单

url:表示要输入一个网址

    <input  type=”url” name=”url”placeholder=”请输入网址” required  >

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

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

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

   <input  type=”tel” name=”tel”placeholder=”请输入电话号码”required >

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

number:

  • 购买数量:<input type=”number” min=”1” max=”10” step=”10” value=”3” name=”haha”>
  • html5学习笔记(四)增强的表单
    • 这是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
    • 浏览器版本比较低的话有可能不支持,不同的浏览器支持程度不同
html5学习笔记(四)增强的表单

color

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

    <input type=”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

<input type=”search”name=”search” placeholder=”请输入关键字”>

html5学习笔记(四)增强的表单

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

file

<input type=”file”>

html5学习笔记(四)增强的表单

    • 用来创建一个文件选取的输入框
    • 可通过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>
html5学习笔记(四)增强的表单

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>
html5学习笔记(四)增强的表单

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里面的内容

html5学习笔记(四)增强的表单

    • 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>

html5学习笔记(四)增强的表单

 

  • 可以添加disabled属性和autofocus属性

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

datalist元素

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

<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>

html5学习笔记(四)增强的表单 

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

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

3.13 表单的新增属性

HTML5新增表单属性

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

<form action=””method=”get” id=”a”>

  用户名:<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元素建立关联

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

 html5学习笔记(四)增强的表单

    <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>
html5学习笔记(四)增强的表单


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>
html5学习笔记(四)增强的表单

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>
html5学习笔记(四)增强的表单

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>

    html5学习笔记(四)增强的表单


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>

html5学习笔记(四)增强的表单

3.20 fieldset/legend与新增的keygen元素

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

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

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

<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>
html5学习笔记(四)增强的表单

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>
html5学习笔记(四)增强的表单

3.21 小结与其他新增元素

学习要点

  • 了解新增的input属性pattern
  • 其他几个新增元素(非表单中元素,但是也放在这里讲解)

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

type属性值是URLemail会有类似的提示,如果其他如学号、邮政编码等也要规定输入格式则用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>

 html5学习笔记(四)增强的表单

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

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

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

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

    默认是不展开的,添加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>

     html5学习笔记(四)增强的表单

    <fieldset>

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

       框中的代码。。。。

    </fieldset>

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

    <details open>

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

         列表的内容代码。。。。(默认收起)

    </details>

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


     html5学习笔记(四)增强的表单

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

    参考链接

    3.22综合实例

    html5学习笔记(四)增强的表单

    html5学习笔记(四)增强的表单

     <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>