增强表单：select元素、datalist元素、textarea元素、button元素、output元素

最新推荐文章于 2024-04-17 11:04:30 发布

joyce_wu66

最新推荐文章于 2024-04-17 11:04:30 发布

阅读量950

点赞数

本文链接：https://blog.csdn.net/joyce_wu66/article/details/51726143

版权

增强表单：

掌握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 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="" 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:空格转换为 "+" 加号，但不对特殊字符编码。
- 表单的重写：重写 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属性：定义输出域相关的一个或多个元素。
案例演示需要用到两个没有学过的知识，表单事件
- 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>
```
    keygen元素
  - - 掌握details/summary元素的用法
    - 虽然将这个元素放在表单这一章来讲解，但是它可以用在其他更多的场景中，比如导航菜单等
    - details元素：用于描述文档或文档某个部分的细节。
      - 通常与summary元素配合使用，可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details中的内容。
    - details元素的属性：
      - open属性：规定在 HTML 页面上 details 是可见的。
    - 目前还不是所以浏览器都支持，但是相信以后都会支持的
    - 了解新增的input属性pattern
    - 其他几个新增元素（非表单中元素，但是也放在这里讲解）
    1. 新增的input属性pattern：设定输入类型的正则表达式;关于正则表达式的内容将在后续javascript的课程中进行讲解，暂时稍作了解即可
    2. 以下几个元素虽然放在表单这一章来讲，并非表单中的元素
      - 目前所有主流浏览器都不支持的menu标签和目前只有 Internet Explorer 支持command标签暂时不做讲解。
      - details/summary元素也是两个新增的元素，浏览器支持程度相对前两个较好，且用处较广，我们对其进行相对详细的解
    - 通过一个综合实例来回顾学过的内容
    1. 这一章的内容比较多，不必强求一下子全记住，多做一些练习，用得多了自然就可以记住了
    2. 可以自己找一些实例练练手，比如各网站的注册表，调查表之类的，自己仿照着做做练习
    3. 综合实例要用到一些我们即将要将的CSS知识，暂时了解即可，等学过了CSS可以回过头来自己再完善这个案例

joyce_wu66

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
增强表单：select元素、datalist元素、textarea元素、button元素、output元素

增强表单：掌握select元素与datalist元素的使用select元素用来建立一个下拉菜单选项列表不仅可以在表单中使用，还可以在其他块元素和内联元素中使用select只是定义一个下拉菜单列表，其具体列表项要通过option元素建立option元素可以用来建立一个选项，即下拉列表的一个菜单项optgroup元素用来对option元素进行组合分组si
复制链接

扫一扫