H5学习笔记3：HTML5表单及其他新增和改良元素

最新推荐文章于 2022-12-20 15:19:24 发布

博客工具人

最新推荐文章于 2022-12-20 15:19:24 发布

阅读量342

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_42583552/article/details/109129000

版权

1.新增元素与属性

新增属性

1. 表单内元素的form属性：在HTML5里，表单内的从属元素可以写在form外面。

 <form id="testform">
<input type="text"> 
</form> 
<!-- 下面的textarea不必写在上面的form表单内 --> 
<textarea form="testform"></textarea>

2. 表单内元素的formaction属性：可以为所有的提交按钮，诸如、、等增加不同的fromaction属性，使得在单击不同的按钮时可以将表单提交到不同的页面。

<form id="testform" action="server.jsp">
<input type="submit" name="s1" value="v1" formaction="s1.jsp">提交到s1
<input type="submit" name="s2" value="v2" formaction="s2.jsp">提交到s2
<input type="submit" name="s3" value="s3" formaction="s3.jsp">提交到s3 </form>

3. 表单内元素的formmethod属性：对每个表单元素分别制定不同的提交方法（POST或GET）

<form id="testform" action="serve.jsp">
姓名：<input type="text" name="name"><br>
<input type="submit" value="POST提交" formmethod="post">
<input type="submit" value="GET提交" formmethod="get"> </form>

4. 表单内元素的formenctype属性：对表单元素分别制定不同的编码方式，在HTML5之前，表单内有一个enctype属性，它用来指定表单被提交到服务器之前应该如何对数据进行编码，它有三个值：

①appliction/x-www-form-urlencoded（默认）
②multipart/form-data(文件上传)
③text/plain

<form action="server.jsp" method="post">
    <input type="text" name="name" value="test"><br>
    文件：<input type="file" name="files">
    <input type="submit" value="上传" formaction="uploadFile.jsp" formenctype="multipart/form-data">
    <input type="submit" value="提交">
</form>

5. 表单内元素的formtarget属性：它用于指定在何处打开表单提交后所需加载的页面，它的属性值如下：

①_blank：在新的窗口中打开
②_self：在本窗口中打开（默认）
③_parent：在当前窗口的父窗口中打开
④_top：在当前窗口中打开
⑤framename：在指定的框架（frame）中打开

<form id="testform" action="server.js">
  <input type="submit" name="s1" value="v1" formaction="s1.jsp"
  formtarget="_self">提交到s1
  <input type="submit" name="s2" value="v2" formaction="s2.jsp"
  formtarget="_blank">提交到s2
</form>

6. 表单内元素的autofocus属性：为文本框、选择框或按钮框加上autofocus属性后，当页面打开时，这些控件将自动获得焦点。一个页面只能有一个控件具有autofocus属性。

<input type="text" autofocus>

7.表单内元素的required属性：应用了此属性的输入框，在表单提交时，会检查是否已输入内容，如果没有输入内容，则会自动提示用户输入。

<input type="text" required>

8.表单内元素的labels属性：为所有能使用label元素的表单控件定义一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。（很难理解）

代码详见《HTML5与CSS3权威指南》第57页
9.标签的control属性：在标签（label元素）内部放置一个表单元素，并通过该标签的control属性来访问该表单。

<!DOCTYPE html>
<html>
  <head>
    <title>标签的control属性使用示例</title>
    <meta charset="UTF-8">
    <script>
      function setValue () {
        var label = document.getELementById("label");
        var textbox = label.control;
        textbox.value = "621000";
      }
    </script>
  </head>
 
  <body>
    <form>
      <label id="label">
        邮编：<input type="text" maxlength="6">
        <small>请输入六位数字</small>
      </label>
      <input type="button" value="设置默认值" onclick="setValue()">
    </form>
  </body>
</html>

10.文本框的placeholder属性：文本框（text或textarea）处于未输入状态时显示的输入提示。另外我们可以在CSS中控制placeholder的显示样式

<input type="text" placeholder="Input Me">

11.文本框的list属性：单行文本框增加了一个list属性，该属性的值为某个datalist元素的id，此datalist元素列表为用户输入提供便捷选择。我们还可以使用CSS来控制此datalist不显示。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>list属性示例</title>
  </head>
  <body>
    text: <input type="text" name="greeting" list="greetings">
    <!-- 使用style="display:none;"将datalist元素设定为不显示 -->
    <datalist id="greetings" style="display:none;">
      <option value="Good Morning">Good Morning</option>
      <option value="Hello">Hello</option>
      <option value="Good Afternoon">Good Afternoon</option>
    </datalist>
  </body>
</html>

12.文本框的autocomplete属性：它可以指定’on’、‘off’和’'三个值，当指定为’on’时，可以显式指定候补输入的数据列表，使用datalist元素与list属性提供候补输入的数据列表

<iniput type="text" name="geenting" autocomplete="on" list="greetings">

13.文本框的pattern属性：对input元素使用pattern属性，并将其值设为某个格式的正则表达式，在提交时会对用户输入进行检查，检查其输入内容是否符合给定的格式。

<form>
  请输入指定格式的内容：<input type="text" pattern="[0-9][A-Z]{3}" name="part">
  <input type="submit">
</form>

14.文本框的selectionDirection属性：针对input元素和textarea元素，当用户用鼠标选取其文字部分时，可以使用此属性来获取选取的方向，当正向选取文字时，该属性值为’forward’，反向时为’backward’。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>selectionDirection属性使用示例</title>
    <script>
      function alertSelectionDirection () {
        var control = document.forms[0]['text'];
        var direction = control.selectionDirection;
        alert(direction);
      }
    </script>
  </head>
  <body>
    <form>
      <input type="text" name="text">
      <input type="button" value="点击我" onclick="alertSelectionDirection()">
    </form>
  </body>
</html>

15.复选框的indeterminate属性：以前的复选框checkbox只有选中和未选中两种状态，在HTML5中，可以通过JavaScript对该元素使用indeterminate属性，以说明该复选框处于"尚未明确是否选取状态"

<input type="checkbox" indeterminate id="cb">indeterminate属性测试
<script>
  var cb = document.getElementById('cb');
  //将indeterminate属性设为true
  cb.indeterminate = true;
</script>

16.image提交按钮的height属性和width属性：针对类型为image的input元素，HTML5增加了width和height属性，分别指定图片的宽度和高度

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>image类型的input元素使用示例</title>
  </head>
  <body>
    <form>
      姓名： <input type="text" name="name">
      <input type="image" src="edit.gif" alt="编辑" width=23 height=23>
    </form>
  </body>
</html>

17.textarea元素的maxlength属性和wrap属性：

maxlength属性使用整数值设定该textarea元素可输入的最大字符数
wrap属性可以指定soft和hard两个值：当指定为hard时，用户输入时的自动换行会被记录，即在换行处会插入一个换行标志，那么后台拿到的数据也是换行的，而soft则不会有这个效果。使用hard属性时必须指定textarea的cols属性值

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>textarea元素新增的maxlength属性与wrap属性</title>
  </head>
  <body>
    <form action="test.php" method="post">
      <textarea name="name" maxlength=100 rows=5 wrap="hard" cols=5>
      <input type="submit" value="提交">
    </form>
  </body>
</html>

新增和改良的input元素种类

search：与text文本框类似，专用于搜索
tel：与text文本框相似，专用于电话号码
url：与text文本框相似，要求用户必须在其中输入url格式的内容
email：与text文本框相似，要求用户必须在其中输入正确的email格式的内容
date、month、week、time、dateimte-local：各种日期与实践输入文本框
number：与text文本框相似，但其内容必须为数字，否则提交后内容为空
range：只允许输入一段范围内数值的文本框，具有min属性和max属性
color：颜色选择文本框

上面的新的属性在各浏览器中会表现的不一样

1.url类型：url类型的input专门用于输入url地址的文本框，若输入内容格式不符，则不允许提交

<input type="url" name="url" value="http://www.microsoft.com">

2.email类型：email类型的input专门用于输入email地址的文本框，若输入内容格式不符，则不允许提交，它还有一个multiple属性，这个属性允许用户输入多个email地址，使用逗号来分割

<input type="email" name="email" value="3494688@qq.com">
<input type="email" name="emails" multiple value="3494688@qq.com,kaindy7633@gmail.com">

3.date类型：date类型的input允许用户输入日期类型的内容，通常会以日历的形式向用户展示，方便用户选择输入。

<input type="date" name="date" value="2016-0101">

4.time类型：time类型的input是专门用来输入时间的文本框，并且在提交时会对输入的内容进行有效性检查。

<input type="time" name="time" value="10:00">

5.datetime-local类型：datetime-local类型专门用来输入本地日期和时间的文本框，并且在提交时会对输入内容进行有效性检查。

<input type="datetime-local" name="datetime-local" value="2016-01-01T10:00:15">

6.month类型：month类型专门用来输入月份的文本框，并在提交时做有效性检查

<input type="month" name="month" value="2015-10">

7.week类型：week类型专门用来输入周号的文本框，并在提交时做有效性检查

<input type="week" name="week" value="2010-W40">

8.日期与时间类型元素的属性

①所有用于输入日期和时间的元素（date、time、dateime-local、month、week）都具有一个step属性，该属性用于对用户的选择进行限定

<input type="date" name="date" step="3">

对于datetime-local属性，使用step=60或60的整数倍则表示最小的输入单位是分钟，而不为整数倍时，表示可以输入以秒为单位的值

②在JavaScript中，使用stepUp方法和stepDown方法，可以变更这些具有step属性的输入值

document.forms[0].date.stepUp(5);

③在使用这些日期和时间的元素时，可以通过使用min属性和max属性来限定输入值得范围

<input type="date" name="date" min="2016-01-01" max="2016-01-31">

④所有用于输入日期和时间的元素都有一个valueAsDate属性，用于设置或获取UTC日期和时间

⑤所有用于输入日期和时间的元素都有一个valueAsNumber属性，用于设置或获取元素中所设置的日期和时间呗转换后的整数值（1970年1月1日0时0点0秒后所经过的毫秒数），也就是时间戳。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UFT-8">
    <title>valueAsDate属性使用示例</title>
  </head>
  <body>
    <form>
      <input type="date" name="date" id="date">
      <input type="button" value="点击我" onclick="alert(document.getElementById('date').valueAsNumber)">
    </form>
    
    <script>
      document.getElementById('date').valueAsDate = new Date();
    </scriipt>
  </body>
</html>

9.number类型：专门用来输入数字的文本框，并在提交时进行检查，若不符则会以空白内容提交。number类型也具有max、min和step属性

<input type="number" name="number" value="25" max="100" min="10" step="5">

JavaScript为number元素提供了valueAsNumber属性，可以利用该属性设置和读取该元素中的值

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>valueAsNumber属性使用示例</title>
    <script>
      function sum () {
        var number1 = document.getElementById('number1').valueAsNumber;
        var number2 = document.getElementById('number2').valueAsNumber;
        document.getElementById('result').valueAsNumber = number1 + number2;
      }
    </script>
  </head>
  <body>
    <form>
      <input type="number" id="number1"> + 
      <input type="number" id="number2"> =
      <input type="number" id="result" readonly>
      <input type="button" value="计算" onclick="sum();">
    </form>
  </body>
</html>

10.range类型：一种只允许输入一段范围内的数值的文本框，具有max属性和min属性，也具有step属性

<input type="range" name="range" value="25" max="100" min="10" step="5">

11.search类型：它是一种专门用来输入搜索关键词的文本框。外观上可以用CSS样式改写：

input[type="search"] {-webkit-appearance: textfield;}

12.tel类型：它被设计用来输入电话号码的专用文本框，但它并没有校验规则，我们可以通过pattern属性来指定对用户输入内容进行验证。

13.color类型：color类型的input元素用于选取颜色，其提供了一个颜色选择器。

选择背景：
<input type="color" onchange="document.body.style.backgroundColor=document.getElementById('currentColor').textContent = this.value;">
<span id="currentColor"></span>

14.简单表单示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>简单表单示例</title>
  </head>
  <body>
    <form name="form1">
      <label for="username">姓名：</label>
      <input type="text" name="username" id="username" required><br>
       <label for="age">年龄：</label>
       <input type="number" name="age" id="age" min="0" max="100"><br>
       <label for="birthday">出生日期：</label>
       <input type="date" name="birthday" id="birthday"><br>
       <label for="Email">Email：</label>
       <input type="email" name="email" id="email" required><br>
       <label for="url">个人主页：</label>
       <input type="url" name="url" id="url"><br>
       <label for="memo">个人简介：</label>
       <textarea name="memo" id="memo" required></textarea><br>
       <input type="submit">   
    </form>
  </body>
</html>

对新的表单元素使用样式

output元素的追加
output元素定义不同类型的输出，比如计算结果或脚本的输出，它必须书写在表单内部

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>output元素示例</title>
    <script>
      function value_change() {
         var number = document.getElementById('range1').value;
         document.getElementById('output1').value = number;
      }
    </script>
  </head>
  <body>
    <form id="testform">
      请选择一个数值：
      <input type="range" id="range1" min=0 max=100 step=5 value=10 onchange="value_change()">
      <output id="output1">10</output>
    </form>
  </body>
</html>

2.表单验证

1.自动验证
在HTML5中，通过对元素使用属性的方法，可以实现对表单提交时执行的自动验证功能

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>表单验证示例</title>
  </head>
  <body>
    <form method="post">
      <input type="text" required pattern="^\w.*$">
      <input type="submit">
    </form>
  </body>
</html>

2.取消验证
有两种方法可以取消表单验证：

利用form元素的novalidate属性来关闭整个表单验证
利用input元素或submit元素的formnovalidate属性

3.显式验证
checkValidity方法，调用该方法，可以显式的对表单内所有元素内容或单个元素内容进行有效性验证，它返回布尔值。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>checkValidity示例</title>
    <script>
      function check() {
        var email = document.getElementById('email');
        if(email.value == '') {
          alert('请输入Email地址');
          return false;
        } else if(!email.checkValidity()) {
          alert('请输入正确的email地址');
          return false;
        } else {
          alert('您输入的Email地址有效');
        }
      }
    </script>
  </head>
  <body>
    <form id="testform" onsubmit="return check();" novalidate="true">
      <label for="email">Email:</label>
      <input type="email" name="email" id="email">
      <input type="submit">
    </form>
  </body>
</html>

3.增强的页面元素

1.新增的figure元素与figcaption元素
figure元素用来表示页面上的块独立的内容，它可以表示图片、统计图表或示例代码

figcaption元素表示figure元素的标题，它从属与figure必须书写在figure元素的内部

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>figure元素示例</title>
  </head>
  <body>
    <figure>
      <img src="s1.jpg" alt="森林">
      <figcaption>森林</figcaption>
    </figure>
  </body>
</html>

2.新增的details元素与summary元素
details元素为一种用于标识该元素内部的子元素可以展开、收缩显示元素。

summary元素从属于details元素，在用鼠标点击summary元素中的内容文字时，details元素中的其他所有从属元素将会展开或收缩。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>details元素使用示例</title>
    <script>
      function detail_ontoggle(detail) {
        var p = document.geElementById('p');
        if(detail.open) {
          p.style.visibility = 'visible';
        } else {
          p.style.visibility = 'hidden';
        }
      }
    </script>
  </head>
  <body>
    <details id="detail" ontoggle="detail_ontoggle(this)" style="curosr:pointer">
      <summary>精武风云</summary>
      <p id="p" style="visibility:hidden">陈真（甄子丹 饰）当年为报杀师之仇，独创虹口道场...（精武风云电影介绍）</p>
    </details>
  </body>
</html>

3.新增的mark元素
mark元素表示页面中需要突出显示或高亮显示的内容

<p><mark>HTML5</mark>是近十年Web开发标准最巨大的飞跃</p>

4.新增的progress元素
progress元素代表一个任务的完成进度，这个进度可以是不确定的，表示进度正在进行。

该元素具有两个表示当前任务完成情况的属性，value属性表示已完成了多少工作量，max属性表示总共有多少工作量。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>progress元素的使用示例</title>
    <script>
      var progressBar = document.getElementById('p');
      function button_onlcick() {
        var progressBar = document.getElementById('p');
        progressBar.getElementByTagName('span')[0].textContent = "0";
        for(var i=0; i<=100; i++) {
          updateProgress(i);
        }
      }
      function updateProgress(newValue) {
        var progressBar = document.getElementById('p');
        progressBar.value = newValue;
        progressBar.getElementByTagName('span')[0].textContent = newValue;
      }
    </script>
  </head>
  <body>
    <section>
      <h2>progress元素的使用示例</h2>
      <p>完成百分比：<progress id="p" max=100><span>0</span>%</progress></p>
      <input type="button" onclick="button_onclick()" vlaue="请点击">
    </section> 
  </body>
</html>

5.新增的meter元素
meter元素表示规定范围内的数量值，如磁盘使用量，投票比例等，它有6个属性

value：在元素中标示出来的实际值
min：指定规定范围时允许使用的最小值
max：指定规定范围时允许使用的最大值
low：规定范围的下限值，必须小于或等于high属性的值
high：规定范围的上限值
optimum：最佳值，该属性值必须在min属性值和max属性值之间

<p>磁盘使用量：<meter value="40" min="0" max="160">40/160</meter>GB</p>

6.新增的dialog元素
dialog元素代表一个对话框

在默认情况下，dialog元素是隐藏的，我们可以在JavaScript代码中使用元素的show方法显示dialog元素，使用close方法隐藏dialog元素

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="button" value="打开对话框" onclick="document.getElementById('dg').show();">
    <dialog id="dg" style="width: 9%; text-align: center;">
      <h1> 用户登录 </h1>
      <main>
        <form class="" action="index.html" method="post">
          <label for="txtName" value="用户名">
            <input type="text" id="txtName">
          </label><br>
          <label for="txtPassword" value="密码">
            <input type="password" id="txtPassword">
          </label><br>
          <input type="button" value="登录">
          <input type="button" value="关闭" onclick="document.getElementById('dg').close();">
        </form>
      </main>
    </dialog>
  </body>
</html>

可以使用dialog元素的showModal方法以模式对话框的形式显示dialog元素

<input type="button" value="打开对话框" onclick="document.getElementById('dg').showModal();">

如果要在页面打开时显示对话框，可以使用dialog元素的open属性

<dialog id="dg" open style="width:9%;text-align:center;">

可以使用dialog元素的returnValue属性为对话框设置或返回一个值

<input type="button" value="打开对话框" onclick="document.getElementById('dg').show(); document.getElementById('dg').returnValue='返回的值';">
 
<input type="button" value="关闭" onclick="document.getElementById('dg').close(); alert(document.getElementById('dg').returnValue);">

7.改良的a元素
在HTML5中，为a标签添加了download属性，用户点击带有此属性的链接后，将直接下载链接所指向的资源文件。

<a href="html5.jpg" download="HTML5权威指南"><img src="html5.jpg"></a>

用户点击链接后将直接下载html5.jpg这个图片文件，且文件名为’HTML5权威指南’

8.改良的ol列表
在HTML5中，为ol元素添加了start属性和reversed属性

如果希望列表编号不是从1开始，可以使用start属性自定义开始编号

<ol start=5>
  <li>列表内容</li>
  <li>列表内容</li>
  <li>列表内容</li>
  <li>列表内容</li>
  <li>列表内容</li>
</ol>

如果需要对列表进行反向编号，可以使用ol列表的resersed属性

<ol start=5 resersed>
  <li>列表内容</li>
  <li>列表内容</li>
  <li>列表内容</li>
  <li>列表内容</li>
  <li>列表内容</li>
</ol>

9.改良的dl列表
dl列表可以用来定义文章或网页上的术语解释

<dl>
  <dt><dfn>RSS</dfn></dt>
  <dd>RSS也叫聚合RSS是在线共享内容的一种简易方式....</dd>
  <dt><dfn>博客</dfn></dt>
  <dd>博客，又译为网络日志、部落格或部落阁等，是一种通常由个人管理...</dd>
</dl>

它也可以用来表示一些页面或article元素中内容的辅助信息

<dl>
  <dt>作者</dt>
  <dd>Kaindy</dd>
  <dt>出版社</dt>
  <dd>机械工业出版社</dd>
  <dt>类别</dt>
  <dd>网络开发</dd>
</dl>

10.加以严格限制的cite元素
cite元素表示作品（一本书、一篇文章、一首歌曲）的标题。在HTML4中cite可以用来表示作者，但在HTML5中明确规定不能使用cite元素表示包括作者在内的任何人名。

<p>我最喜欢的电影是由甄子丹主演的<cite>精武风云</cite>。</p>

11.重新定义的small元素
small元素定义了更具体的、专门用来标识所谓"小字印刷体"的元素，通常用在诸如免责声明、注意事项、法律规定、版权相关等声明文字中。

12.安全性增强的iframe元素
略…

13.增强的script元素
在HTML5中，对于script元素，新增async属性和defer属性，它们的作用都是为了加快页面的加载速度，使得脚本代码的读取不再妨碍页面上其他元素的加载。

当我们使用async属性时，脚本文件下载完毕后，会立即执行onload事件处理函数

<script async src="xxx.js" onload="myInit1()"></script>
<script async src="aaa.js" onload="myInit2()"></script>

而当我们使用defer属性时，脚本文件下载完毕后，不会立即执行onload事件处理函数，而是要等到页面全部加载完成后，才执行该脚本文件的onload事件处理函数

<script defer src="xxx.js" onload="myInit1()"></script>
<script defer src="aaa.js" onload="myInit2()"></script>

博客工具人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
H5学习笔记3：HTML5表单及其他新增和改良元素

1.新增元素与属性新增属性1. 表单内元素的form属性：在HTML5里，表单内的从属元素可以写在form外面。 <form id="testform"><input type="text"> </form>  <textarea form="testform"></textarea>2. 表单内元素的formaction属性：可以为所有的提交按钮，诸
复制链接

扫一扫