增强表单:
掌握select元素与datalist元素的使用
select元素
- 用来建立一个下拉菜单选项列表
- 不仅可以在表单中使用,还可以在其他块元素和内联元素中使用
- select只是定义一个下拉菜单列表,其具体列表项要通过option元素建立
- option元素可以用来建立一个选项,即下拉列表的一个菜单项
- optgroup元素用来对option元素进行组合分组
- size用来定义列表中显示的列表项
- multiple属性用来定义是否可以多选
- 可以添加disabled属性和autofocus属性
datalist元素
- HTML5新增元素,用来建立一个选项列表
- datalist元素的内容不会直接显示在网页上,只是会在用户输入时作为候选项
- 通常与input元素配合使用
- 之前课程中已经接触过的新增属性:autocomplete属性/autofocus属性/list属性/multiple属性/placeholder属性/required属性/min/max/step属性
- form属性:将表单外的内容与表单进行关联
- novalidate属性:设置数据提交时不进行验证
- enctype属性:仅作了解规定在发送到服务器之前应该如何对表单数据进行编码。通常情况下我们使用默认值即可
- accept-charset属性:仅作了解accept-charset 属性规定服务器处理表单数据所接受的字符集。 accept-charset 属性允许您指定一系列字符集,服务器必须支持这些字符集,从而得以正确解释表单中的数据。通常情况下我们使用默认值即可 此属性的默认值是 "unknown",表示表单的字符集与包含表单的文档的字符集相同。
- form属性:将表单外的内容与表单进行关联
<form action="">
<select name="" id="" size="3" multiple="">
<optgroup>
<option value="">HTML5</option>
<option value="">PHP</option>
<option value="">FLASH</option>
<option value="">CAD</option>
<option value="">C++</option>
<option value="">VB</option>
</optgroup>
</select>
</form><br><br>
<form action="">
<pre name="code" class="html">
<h3>查找您要收看的课程</h3> <input type="text" name="dd" list="mydatalist" multiple=""> <datalist id="mydatalist"> <option value="HTML5">HTML5</option> <option value="PHP">PHP</option> <option value="FLASH">FLASH</option> <option value="CAD">CAD</option> <option value="C++">C++</option> <option value="VB">VB</option> </datalist> <input type="submit"> </form>
<form action="">
<select name="" id="" size="3" multiple="">
<optgroup>
<option value="">HTML5</option>
<option value="">PHP</option>
<option value="">FLASH</option>
<option value="">CAD</option>
<option value="">C++</option>
<option value="">VB</option>
</optgroup>
</select>
</form><br><br>
<form action="">
<pre name="code" class="html">
<form action="" id="kc">
<h3>选择您要查找的课程</h3>
<input type="text" list="mydatalist">
<datalist id="mydatalist">
<option value="HTML5">HTML5</option>
<option value="PHP">PHP</option>
<option value="JAVA">JAVA</option>
<option value="VB">VB</option>
<option value="FLASH">FLASH</option>
<option value="C++">C++</option>
</datalist>
<input type="submit">
</form><br><hr>
用户名:<input type="user" name="user" form="kc">
<form action="" id="kc">
<h3>选择您要查找的课程</h3>
<input type="text" list="mydatalist">
<datalist id="mydatalist">
<option value="HTML5">HTML5</option>
<option value="PHP">PHP</option>
<option value="JAVA">JAVA</option>
<option value="VB">VB</option>
<option value="FLASH">FLASH</option>
<option value="C++">C++</option>
</datalist>
<input type="submit">
</form><br><hr>
用户名:<input type="user" name="user" form="kc">
lable元素
- 用来为 input 元素定义标注(标记),建立一个与之相关联的标签
- for属性,让标签与指定的input元素建立关联
- 将input元素包含在label标签中
- 可以通过accesskey建立快捷键(已经讲过内容,不再演示)
lable属性
在option元素中可以设定比标签内容更优先的选项optgroup的分组名称<form action=""> <h3>您最希望听到哪方面的计算机课程</h3> <input type="checkbox" name="a" > <label for="a">平面设计</label> <input type="checkbox" name="b" > <label for="b">编程语言</label> <input type="checkbox" name="c" > <label for="c">HTML5</label> <input type="checkbox" name="d" > <label for="d">FLASH</label> <input type="checkbox" name="e" > <label for="e">CAD</label> <input type="checkbox" name="" checked="f" > <label for="f">PHP</label> </form>
<form action=""> <h3>查找您要收看的课程</h3> <input type="submit" value="搜索"> <select name="" > <optgroup label="设计系列" > <option value="SKETH">SKETH</option> <option value="AI">AI</option> <option value="PS">PS</option> </optgroup> <optgroup label="编程语言"> <option value="C++">C++</option> <option value="JAVA">JAVA</option> <option value="VB">VB</option> </optgroup> </select> </form>
textarea元素
- 用来建立多行输入文本框
- 元素标签中的内容将一文本框默认值的形式呈现
- 不仅可以用在表单中,也可以在其他块元素或内联元素中
- textarea元素的属性:
- name/disabled/readonly/form/reauired/autofocus/placeholder属性,这些属性的用法之前课程中已经有讲解,就不再一一演示
- rows属性:设置多行文本的行数(高度)
- cols属性:设置多行文本的每行显示的字数(宽度)
- 补充内容,input元素的size属性
<form action=""> 用户名: <input type="user" name="user"><br><br> 意见: <textarea name="" id="" cols="20" rows="5"> </textarea><br><br> <input type="submit"> <input type="reset"> </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:空格转换为 "+" 加号,但不对特殊字符编码。
- 当method设定发送方式为get时,不必设置该属性;
- 表单的重写:重写 form 元素的某些属性设定。
表单重写属性适用于提交按钮
- formaction - 重写表单的 action 属性
- formenctype - 重写表单的 enctype 属性
- formmethod - 重写表单的 method 属性
- formnovalidate - 重写表单的 novalidate 属性
- formtarget - 重写表单的 target 属性
button元素
- 用来建立一个按钮从功能上来说,与input元素建立的按钮相同
- button元素是双标签,其内部可以配置图片与文字,进行更复杂的样式设计
- 不仅可以在表单中使用,还可以在其他块元素和内联元素中使用
- button元素的属性
- type属性:可以设置三个值 submit/reset/button与input元素设置的按钮含义相同
- name/vlue/disable属性:与input的用法相同
- autofocus属性:设置按钮自动获得焦点。
- form属性:设定按钮隶属于哪一个或多个表单
- formmethod属性:设定表单的提交方式,将覆盖原本的提交方式
- formnovalidate属性:设定表单将会覆盖原本的novalidate属性
- fomaction属性:指定表单数据发送对象,将覆盖原来的action属性设定
- formenctype属性;指定表单的数据发送类型,将覆盖原本的enctype属性设定
- formtarget属性:将覆盖原本的target属性设定
<form action=""> 用户名: <input type="user" name="user"><br><br> 意见: <textarea name="" id="" cols="20" rows="5" placeholder="请输入您的意见,谢谢参与" style="background: f0fffff"></textarea><br><br> <button type="submit" style="background: "><img src="../img/..png" alt="" width="2">发表意见</button> <button type="reset" style="background: ">重新填写</button> </form>
<form action=""> 用户名: <input type="user" name="user"><br><br> 意见: <textarea name="" id="" cols="20" rows="5" placeholder="请输入您的意见,谢谢参与" style="background: f0fffff"></textarea><br><br> <input type="submit" value="提交到地址1" formaction="url.html"> <input type="reset"><br><br> <input type="submit" value="提交到地址2" formaction="ur2.html"> <input type="reset"><br><br> <input type="submit" value="提交到地址3" formaction="ur3.html"> <input type="reset"><br><br> </form>
重要事项:如果在表单中使用 button 元素,不同的浏览器会提交不同的值。Internet Explorer 将提交 button元素开始标签与结束标签之间的文本,而其他浏览器将提交 value 属性的内容。最好就是在表单中使用 input 元素来创建按钮。其他地方使用button创建按钮
output元素:数据的输出
- output元素是HTML5新增的元素,用来设置不同数据的输出
- output元素的输出内容是由代码控制的
- 这节课的演示需要用到简单的javascript知识,暂时不理解没关系,主要是了解output元素的使用方法,后边的课程中我们安排了专门的章节讲解javascript
- output元素的属性:
- name属性:定义对象的唯一名称。(表单提交时使用)
- form属性:定义所属的一个或多个表单。
- for属性:定义输出域相关的一个或多个元素。
- action/method/enctype/name/accept-charset/accept/target/autocomplete/novalidate
- 案例演示需要用到两个没有学过的知识,表单事件
- oninput表单事件:当用户对元素数据的输入时触发
- parseInt() 是一个javascript函数,它可以解析一个字符串,并返回一个整数。
- 了解progress/meter元素的用法
- progress元素
- 是HTML5中新增的元素,用来建立一个进度条
- 通常与JavaScript 一同使用,来显示任务的进度。
- 使用时注意浏览器的支持情况:Internet Explorer 9 以及更早的版本不支持
- progress元素的属性:
- max属性:规定当前进度的最大值。
- value属性设定进度条当前默认显示值
- form属性:规定进度条所属的一个或多个表单。
- meter元素
- 是HTML5中新增的元素,用来建立一个度量条,用来表示度量衡的评定
- 通常与JavaScript 一同使用,来显示任务的进度。
- meter元素的属性:
- value属性设定进度条当前默认显示值
- max属性:规定范围的最大值,默认值为1.
- min属性:规定范围的最小值,默认值为0.
- low属性:规定被视作低的标准。
- high属性:规定被视作高标准。
- form属性:规定所属的一个或多个表单。
<form action="" id="myform" οninput="num.value=parseInt(num1.value)+parseInt(num1.value)"> <input type="number" id="num1">+ <input type="number" id="num2">= <output name="num" for="num1 num2"></output> </form>
<form action=""> <h3>当前下载进度</h3> <progress value="20" max="100"></progress><br><br> <h3>您的当前排名为:</h3> <meter value="10" max="100" min="0"></meter><br><br> <meter value="60" max="100" min="0"></meter> </form>
- 掌握fieldset/legend元素的用法
- 了解keygen元素的用法
- fieldset元素:可将表单内的相关元素分组。
- 当一组表单元素放到fieldset标签内时,浏览器会以特殊方式来显示它们,通常会有一个边框。
- 没有必需的或唯一的属性。form/disabled属性可用。
- legend元素:为 fieldset 元素定义标题
<details> <summary>文章点击率分析</summary> <h3>该文章目前点击率:8000</h3> <li>8000以上:很火</li> <meter max="10000" min="0" low="1000" high="8000" value="9000"></meter> <li>3000--8000:一般</li> <meter max="10000" min="0" low="1000" high="8000" value="5000">5000</meter> <li>3000以下</li><meter max="10000" min="0" low="1000" high="8000" value="1000">1000</meter> </details>
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title> 实例演示</title> <style type="text/css"> form{width:500px;background:#8A2BE2;padding: 10px; margin-top: 150px;margin-left: 300px;} button{background:background:#A9A9A9;padding: 6px;border-radius: 5px;} input{background:#f8f8f8;padding: 6px;border-radius: 5px} </style> </head> <body> <form action=""> <fieldset> <legend>注册用户</legend> <p><label for="user">账号:</label><input type="user" name="user" id="user" placeholder="账号"></p> <p><label for="password">密码:</label><input type="password" name="password" id="password" placeholder="密码"></p> <p><label for="tel">电话号码:</label> <input type="tel" name="tel" id="tel" placeholder="电话"></p> <p><label for="email">电子邮件:</label> <input type="email" name="email" id="email" placeholder="电子邮件"></p> <button>注册用户</button> </fieldset> </form> </body> </html>
-
- 掌握details/summary元素的用法
- 虽然将这个元素放在表单这一章来讲解,但是它可以用在其他更多的场景中,比如导航菜单等
- details元素:用于描述文档或文档某个部分的细节。
- 通常与summary元素配合使用,可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details中的内容。
- details元素的属性:
- open属性:规定在 HTML 页面上 details 是可见的。
- 目前还不是所以浏览器都支持,但是相信以后都会支持的
- 了解新增的input属性pattern
- 其他几个新增元素(非表单中元素,但是也放在这里讲解)
- 新增的input属性pattern:设定输入类型的正则表达式;关于正则表达式的内容将在后续javascript的课程中进行讲解,暂时稍作了解即可
-
以下几个元素虽然放在表单这一章来讲,并非表单中的元素
- 目前所有主流浏览器都不支持的menu标签和目前只有 Internet Explorer 支持command标签暂时不做讲解。
- details/summary元素也是两个新增的元素,浏览器支持程度相对前两个较好,且用处较广,我们对其进行相对详细的解
- 目前所有主流浏览器都不支持的menu标签和目前只有 Internet Explorer 支持command标签暂时不做讲解。
- 通过一个综合实例来回顾学过的内容
- 这一章的内容比较多,不必强求一下子全记住,多做一些练习,用得多了自然就可以记住了
- 可以自己找一些实例练练手,比如各网站的注册表,调查表之类的,自己仿照着做做练习
- 综合实例要用到一些我们即将要将的CSS知识,暂时了解即可,等学过了CSS可以回过头来自己再完善这个案例
-