当前位置:主页HTML 教程

13. 表单标签

文章来源:知付 更新时间:2022-05-28 23:37 热度:179

表单(form)是用户输入信息与网页互动的一种形式。大多数情况下,用户提交的信息会发给服务器,比如网站的搜索栏就是表单。

表单由一种或多种的小部件组成,比如输入框、按钮、单选框或复选框。这些小部件称为控件(controls)。

目录
  <form>

 - 简介

 - enctype 属性
 - <fieldset>,<legend>

 - <label>
  <input>

 - [简介

 - 类型
 -<button>

 - <select>

 - <option>,<optgroup>

 - <datalist>

 - <textarea>

 - <output>

 - <progress>

 - <meter>
  • 参考链接

<form>

简介

<form> 标签用来定义一个表单,所有表单内容放到这个容器元素之中。

<form>
  <!-- 各种表单控件-->
</form>

上面代码就是表单的基本形式。

下面是一个比较常见的例子。

<form action="https://example.com/api" method="post">
  <label for="POST-name">用户名:</label>
  <input id="POST-name" type="text" name="user">
  <input type="submit" value="提交">
</form>

上面代码就是一个表单,一共包含三个控件:一个 <label> 标签,一个文本输入框,一个提交按钮。其中,文本输入框的 name 属性是 user ,表示将向服务器发送一个键名为 user 的键值对,键值就是这个控件的 value 属性,等于用户输入的值。

用户在文本输入框里面,输入用户名,比如 foobar ,然后点击提交按钮,浏览器就会向服务器 https://example.com/api 发送一个 POST 请求,发送 user=foobar 这样一段数据。

<form> 有以下属性。

  • accept-charset :服务器接受的字符编码列表,使用空格分隔,默认与网页编码相同。

  • action :服务器接收数据的 URL。

  • autocomplete :如果用户没有填写某个控件,浏览器是否可以自动填写该值。它的可能取值分别为 off (不自动填写)和 on (自动填写)。

  • method :提交数据的 HTTP 方法,可能的值有 post (表单数据作为 HTTP 数据体发送), get (表单数据作为 URL 的查询字符串发送), dialog (表单位于 <dialog> 内部使用)。

  • enctype :当 method 属性等于 post 时,该属性指定提交给服务器的 MIME 类型。可能的值为 application/x-www-form-urlencoded (默认值), multipart/form-data (文件上传的情况), text/plain

  • name :表单的名称,应该在网页中是唯一的。注意,如果一个控件没有设置 name 属性,那么这个控件的值就不会作为键值对,向服务器发送。

  • novalidate :布尔属性,表单提交时是否取消验证。

  • target :在哪个窗口展示服务器返回的数据,可能的值有 _self (当前窗口), _blank (新建窗口), _parent (父窗口), _top (顶层窗口), <iframe> 标签的 name 属性(即表单返回结果展示在 <iframe> 窗口)。

enctype 属性

<form> 表单的 enctype 属性,指定了采用 POST 方法提交数据时,浏览器给出的数据的 MIME 类型。该属性可以取以下值。

(1) application/x-www-form-urlencoded

application/x-www-form-urlencoded 是默认类型,控件名和控件值都要转义(空格转为 + 号,非数字和非字母转为 %HH 的形式,换行转为CR LF),控件名和控件值之间用 = 分隔。控件按照出现顺序排列,控件之间用 &amp; 分隔。

(2) multipart/form-data

multipart/form-data 主要用于文件上传。这个类型上传大文件时,会将文件分成多块传送,每一块的 HTTP 头信息都有 Content-Disposition 属性,值为 form-data ,以及一个 name 属性,值为控件名。

Content-Disposition: form-data; name="mycontrol"

下面是上传文件的表单。

<form action="https://example.com/api"
      enctype="multipart/form-data"
      method="post">
  用户名:<input type="text" name="submit-name"><br>
  文件:<input type="file" name="files"><br>
  <input type="submit" value="上传"> <input type="reset" value="清除">
</form>

上面代码中,输入用户名 Larry ,选中一个 file1.txt 文件,然后点击“上传”。浏览器发送的实际数据如下。

Content-Type: multipart/form-data; boundary=--AaB03x

--AaB03x
Content-Disposition: form-data; name="submit-name"

Larry
--AaB03x
Content-Disposition: form-data; name="files"; filename="file1.txt"
Content-Type: text/plain

... contents of file1.txt ...
--AaB03x--

上面代码中,浏览器将这个表单发成多个数据块。最上面使用 Content-Type 字段告诉服务器,数据格式是 multipart/form-data (即多个数据块),每个数据块的分隔标志是 --AaB03x 。每个数据块的第一行是 Content-Disposition ,其中的 name 字段表示这个数据块的控件名,数据体则是该控件的数据值,比如第一个数据块的 name 属性是 submit-name 控件,数据体是该控件的值 Larry 。第二个数据块是控件 files ,由于该控件是上传文件,所以还要用 filename 属性给出文件名 file1.txt ,数据体是 file1.txt 的内容。

<fieldset><legend>

<fieldset> 标签是一个块级容器标签,表示控件的集合,用于将一组相关控件组合成一组。

<form>
  <fieldset>
    <p>年龄:<input type="text" name="age"></p>
    <p>性别:<input type="text" name="gender"></p>
  </fieldset>
</form>

上面代码中,两个输入框是一组,它们的外面会显示一个方框。

<fieldset> 有以下属性。

  • disabled :布尔属性,一旦设置会使得 <fieldset> 内部包含的控件都不可用,都变成灰色状态。

  • form :指定控件组所属的 <form> ,它的值等于 <form>id 属性。

  • name :该控件组的名称。

    <legend> 标签用来设置 <fieldset> 控件组的标题,通常是 <fieldset> 内部的第一个元素,会嵌入显示在控件组的上边框里面。

<fieldset>
  <legend>学生情况登记</legend>
  <p>年龄:<input type="text" name="age"></p>
  <p>性别:<input type="text" name="gender"></p>
</fieldset>

上面代码中,这个控件组的标题会,嵌入显示在 <fieldset> 的上边框。

<label>

<label> 标签是一个行内元素,提供控件的文字说明,帮助用户理解控件的目的。

<label for="user">用户名:</label>
<input type="text" name="user" id="user">

上面代码中,输入框前面会有文字说明“用户名:”。

<label> 的一大优势是增加了控件的可用性。有些控件比较小(比如单选框),不容易点击,那么点击对应的 <label> 标签,也能选中该控件。点击 <label> ,就相当于控件本身的 click 事件。

<label>for 属性关联相对应的控件,它的值是对应控件的 id 属性。所以,控件最好设置 id 属性。

控件也可以放在 <label> 之中,这时不需要 for 属性和 id 属性。

<label>用户名:
  <input type="text" name="user">
</label>

<label> 的属性如下。

  • for :关联控件的 id 属性。

  • form :关联表单的 id 属性。设置了该属性后, <label> 可以放置在页面的任何位置,否则只能放在 <form> 内部。

一个控件可以有多个关联的 <label> 标签。

<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<label for="username"><abbr title="required">*</abbr></label>

上面代码中, <input> 有两个关联的 <label>

<input>

简介

<input> 标签是一个行内元素,用来接收用户的输入。它是一个单独使用的标签,没有结束标志。

它有多种类型,取决于 type 属性的值,默认值是 text ,表示一个输入框。

<input>
<!-- 等同于 -->
<input type="text">

上面代码会生成一个单行的输入框,用户可以在里面输入文本。

<input> 的属性非常多,有些属性是某个类型专用的,放在下文的“类型”部分介绍。这里介绍一些所有类型的共同属性。

  • autofocus :布尔属性,是否在页面加载时自动获得焦点。

  • disabled :布尔属性,是否禁用该控件。一旦设置,该控件将变灰,用户可以看到,但是无法操作。

  • form :关联表单的 id 属性。设置了该属性后,控件可以放置在页面的任何位置,否则只能放在 <form> 内部。

  • list :关联的 <datalist>id 属性,设置该控件相关的数据列表,详见后文。

  • name :控件的名称,主要用于向服务器提交数据时,控件键值对的键名。注意,只有设置了 name 属性的控件,才会向服务器提交,不设置就不会提交。

  • readonly :布尔属性,是否为只读。

  • required :布尔属性,是否为必填。

  • type :控件类型,详见下文。

  • value :控件的值。

类型

type 属性决定了 <input> 的形式。该属性可以取以下值。

(1)text

type="text" 是普通的文本输入框,用来输入单行文本。如果用户输入换行符,换行符会自动从输入中删除。

<input type="text" id="name" name="name" required
       minlength="4" maxlength="8" size="10">

text 输入框有以下配套属性。

  • maxlength :可以输入的最大字符数,值为一个非负整数。

  • minlength :可以输入的最小字符数,值为一个非负整数,且必须小于 maxlength

  • pattern :用户输入必须匹配的正则表达式,比如要求用户输入4个~8个英文字符,可以写成 pattern="[a-z]{4,8}" 。如果用户输入不符合要求,浏览器会弹出提示,不会提交表单。

  • placeholder :输入字段为空时,用于提示的示例值。只要用户没有任何字符,该提示就会出现,否则会消失。

  • readonly :布尔属性,表示该输入框是只读的,用户只能看,不能输入。

  • size :表示输入框的显示长度有多少个字符宽,它的值是一个正整数,默认等于20。超过这个数字的字符,必须移动光标才能看到。

  • spellcheck :是否对用户输入启用拼写检查,可能的值为 truefalse

(2)search

type="search" 是一个用于搜索的文本输入框,基本等同于 type="text" 。某些浏览器会在输入的时候,在输入框的尾部显示一个删除按钮,点击就会删除所有输入,让用户从头开始输入。

下面是一个例子。

<form>
  <input type="search" id="mySearch" name="q"
    placeholder="输入搜索词……" required>
  <input type="submit" value="搜索">
</form>

(3)button

type="button" 是没有默认行为的按钮,通常脚本指定 click 事件的监听函数来使用。

<input type="button" value="点击">

建议尽量不使用这个类型,而使用 <button> 标签代替,一则语义更清晰,二则 <button> 标签内部可以插入图片或其他 HTML 代码。

(4)submit

type="submit" 是表单的提交按钮。用户点击这个按钮,就会把表单提交给服务器。

<input type="submit" value="提交">

如果不指定 value 属性,浏览器会在提交按钮上显示默认的文字,通常是 Submit

该类型有以下配套属性,用来覆盖 <form> 标签的相应设置。

  • formaction :提交表单数据的服务器 URL。

  • formenctype :表单数据的编码类型。

  • formmethod :提交表单使用的 HTTP 方法( getpost )。

  • formnovalidate :一个布尔值,表示数据提交给服务器之前,是否要忽略表单验证。

  • formtarget :收到服务器返回的数据后,在哪一个窗口显示。

(5)image

type="image" 表示将一个图像文件作为提交按钮,行为和用法与 type="submit" 完全一致。

<input type="image" alt="登陆" src="login-button.png">

上面代码中,图像文件是一个可以点击的按钮,点击后会提交数据到服务器。

该类型有以下配套属性。

  • alt :图像无法加载时显示的替代字符串。

  • src :加载的图像 URL。

  • height :图像的显示高度,单位为像素。

  • width :图像的显示宽度,单位为像素。

  • formaction :提交表单数据的服务器 URL。

  • formenctype :表单数据的编码类型。

  • formmethod :提交表单使用的 HTTP 方法( getpost )。

  • formnovalidate :一个布尔值,表示数据提交给服务器之前,是否要忽略表单验证。

  • formtarget :收到服务器返回的数据后,在哪一个窗口显示。

用户点击图像按钮提交时,会额外提交两个参数 xy 到服务器,表示鼠标的点击位置,比如 x=52&amp;y=55x 是横坐标, y 是纵坐标,都以图像左上角作为原点 (0, 0) 。如果图像按钮设置了 name 属性,比如 name="position" ,那么将以该值作为坐标的前缀,比如 position.x=52&amp;position.y=55 。这个功能通常用来地图类型的操作,让服务器知道用户点击了地图的哪个部分。

(6)reset

type="reset" 是一个重置按钮,用户点击以后,所有表格控件重置为初始值。

<input type="reset" value="重置">

如果不设置 value 属性,浏览器会在按钮上面加上默认文字,通常是 Reset

这个控件用处不大,用户点错了还会使得所有已经输入的值都被重置,建议不要使用。

(7)checkbox

type="checkbox" 是复选框,允许选择或取消选择该选项。

<input type="checkbox" id="agreement" name="agreement" checked>
<label for="agreement">是否同意</label>

上面代码会在文字前面,显示一个可以点击的选择框,点击可以选中,再次点击可以取消。上面代码中, checked 属性表示默认选中。

value 属性的默认值是 on 。也就是说,如果没有设置 value 属性,以上例来说,选中复选框时,会提交 agreement=on 。如果没有选中,提交时不会有该项。

多个相关的复选框,可以放在 <fieldset> 里面。

<fieldset>
  <legend>你的兴趣</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding">
    <label for="coding">编码</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music">
    <label for="music">音乐</label>
  </div>
</fieldset>

上面代码中,如果用户同时选中两个复选框,提交的时候就会有两个 name 属性,比如 interest=coding&amp;interest=music

(8)radio

type="radio" 是单选框,表示一组选择之中,只能选中一项。单选框通常为一个小圆圈,选中时会被填充或突出显示。

<fieldset>
  <legend>性别</legend>
  <div>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男</label>
  </div>
  <div>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>
  </div>
</fieldset>

上面代码中,性别只能在两个选项之中,选择一项。

注意,多个单选框的 name 属性的值,应该都是一致的。提交到服务器的就是选中的那个值。

该类型的配套属性如下。

  • checked :布尔属性,表示是否默认选中当前项。

  • value :用户选中该项时,提交到服务器的值,默认为 on

(9)email

type="email" 是一个只能输入电子邮箱的文本输入框。表单提交之前,浏览器会自动验证是否符合电子邮箱的格式,如果不符合就会显示提示,无法提交到服务器。

<input type="email" pattern=".+@foobar.com" size="30" required>

上面代码会生成一个必填的文本框,只能输入后缀为 foobar.com 的邮箱地址。

该类型有一个 multiple 的布尔属性,一旦设置,就表示该输入框可以输入多个逗号分隔的电子邮箱。

<input id="emailAddress" type="email" multiple required>

注意,如果同时设置了 multiple 属性和 required 属性,零个电子邮箱是允许的,也就是该输入框允许为空。

该类型的配套属性如下。

  • maxlength :可以输入的最大字符数。

  • minlength :可以输入的最少字符数。

  • multiple :布尔属性,是否允许输入多个以逗号分隔的电子邮箱。

  • pattern :输入必须匹配的正则表达式。

  • placeholder :输入为空时的显示文本。

  • readonly :布尔属性,该输入框是否只读。

  • size :一个非负整数,表示输入框的显示长度为多少个字符。

  • spellcheck :是否对输入内容启用拼写检查,可能的值为 truefalse

该类型还可以搭配 <datalist> 标签,提供输入的备选项。

<input type="email" size="40" list="defaultEmails">

<datalist id="defaultEmails">
  <option value="jbond007@mi6.defence.gov.uk">
  <option value="jbourne@unknown.net">
  <option value="nfury@shield.org">
  <option value="tony@starkindustries.com">
  <option value="hulk@grrrrrrrr.arg">
</datalist>

上面代码中,输入焦点进入输入框以后,会显示一个下拉列表,里面有五个参考项,供用户参考。

(10)password

type="password" 是一个密码输入框。用户的输入会被遮挡,字符通常显示星号( * )或点( · )。

<input type="password" id="pass" name="password"
           minlength="8" required>

浏览器对该类型输入框的显示,会有所差异。一种常见的处理方法是,用户每输入一个字符,先在输入框里面显示一秒钟,然后再遮挡该字符。

如果用户输入内容包含换行符( U+000A )和回车符( U+000D ),浏览器会自动将这两个字符过滤掉。

该类型的配套属性如下。

  • maxlength :可以输入的最大字符数。

  • minlength :可以输入的最少字符数。

  • pattern :输入必须匹配的正则表达式。

  • placeholder :输入为空时的显示文本。

  • readonly :布尔属性,该输入框是否只读。

  • size :一个非负整数,表示输入框的显示长度为多少个字符。

  • autocomplete :是否允许自动填充,可能的值有 on (允许自动填充)、 off (不允许自动填充)、 current-password (填入当前网站保存的密码)、 new-password (自动生成一个随机密码)。

  • inputmode :允许用户输入的数据类型,可能的值有 none (不使用系统输入法)、 text (标准文本输入)、 decimal (数字,包含小数)、 numeric (数字0-9)等。

(11)file

type="file" 是一个文件选择框,允许用户选择一个或多个文件,常用于文件上传功能。

<input type="file"
       id="avatar" name="avatar"
       accept="image/png, image/jpeg">

该类型有以下属性。

  • accept :允许选择的文件类型,使用逗号分隔,可以使用 MIME 类型(比如 image/jpeg ),也可以使用后缀名(比如 .doc ),还可以使用 audio/* (任何音频文件)、 video/* (任何视频文件)、 image/* (任何图像文件)等表示法。

  • capture :用于捕获图像或视频数据的源,可能的值有 user (面向用户的摄像头或麦克风), environment (外接的摄像头或麦克风)。

  • multiple :布尔属性,是否允许用户选择多个文件。

(12)hidden

type="hidden" 是一个不显示在页面的控件,用户无法输入它的值,主要用来向服务器传递一些隐藏信息。比如,CSRF 攻击会伪造表单数据,那么使用这个控件,可以为每个表单生成一个独一无二的隐藏编号,防止伪造表单提交。

<input id="prodId" name="prodId" type="hidden" value="xm234jq">

上面这个控件,页面上是看不见的。用户提交表单的时候,浏览器会将 prodId=xm234jq 发给服务器。

(13)number

type="number" 是一个数字输入框,只能输入数字。浏览器通常会在输入框的最右侧,显示一个可以点击的上下箭头,点击向上箭头,数字会递增,点击向下箭头,数字会递减。

<input type="number" id="tentacles" name="tentacles"
       min="10" max="100">

上面代码指定数字输入框,最小可以输入10,最大可以输入100。

该类型可以接受任何数值,包括小数和整数。可以通过 step 属性,限定只接受整数。

该类型有以下配套属性。

  • max :允许输入的最大数值。

  • min :允许输入的最小数值。

  • placeholder :用户输入为空时,显示的示例值。

  • readonly :布尔属性,表示该控件是否为只读。

  • step :点击向上和向下箭头时,数值每次递减的步长值。如果用户输入的值,不符合步长值的设定,浏览器会自动四舍五入到最近似的值。默认的步长值是 1 ,如果初始的 value 属性设为 1.5 ,那么点击向上箭头得到 2.5 ,点击向下箭头得到 0.5

(14)range

type="range" 是一个滑块,用户拖动滑块,选择给定范围之中的一个数值。因为拖动产生的值是不精确的,如果需要精确数值,不建议使用这个控件。常见的例子是调节音量。

<input type="range" id="start" name="volume"
         min="0" max="11">

上面代码会产生一个最小值为 0 、最大值为 11 的滑块区域。用户拖动滑块,选择想要的音量。

该类型的配套属性如下,用法与 type="number" 一致。

  • max :允许的最大值,默认为100。

  • min :允许的最小值,默认为0。

  • step :步长值,默认为1。

    value 属性的初始值就是滑块的默认位置。如果没有设置 value 属性,滑块默认就会停在最大值和最小值中间。如果 max 属性、 min 属性、 value 属性都没有设置,那么 value 属性为50。

该类型与 <datalist> 标签配合使用,可以在滑动区域产生刻度。

<input type="range" list="tickmarks">

<datalist id="tickmarks">
  <option value="0" label="0%">
  <option value="10">
  <option value="20">
  <option value="30">
  <option value="40">
  <option value="50" label="50%">
  <option value="60">
  <option value="70">
  <option value="80">
  <option value="90">
  <option value="100" label="100%">
</datalist>

上面代码会在0~100之间产生11个刻度。其中, 0%50%100% 三个位置会有文字提示,不过浏览器很可能不支持。

注意,浏览器生成的都是水平滑块。如果想要生成垂直滑块,可以使用 CSS 改变滑块区域的方向。

(15)url

type="url" 是一个只能输入网址的文本框。提交表单之前,浏览器会自动检查网址格式是否正确,如果不正确,就会无法提交。

<input type="url" name="url" id="url"
       placeholder="https://example.com"
       pattern="https://.*" size="30"
       required>

上面代码的 pattern 属性指定输入的网址只能使用 HTTPS 协议。

注意,该类型规定,不带有协议的网址是无效的,比如 foo.com 是无效的, http://foo.com 是有效的。

该类型的配套属性如下。

  • maxlength :允许的最大字符数。

  • minlength :允许的最少字符串。

  • pattern :输入内容必须匹配的正则表达式。

  • placeholder :输入为空时显示的示例文本。

  • readonly :布尔属性,表示该控件的内容是否只读。

  • size :一个非负整数,表示该输入框显示宽度为多少个字符。

  • spellcheck :是否启动拼写检查,可能的值为 true (启用)和 false (不启用)。

该类型与 <datalist> 标签搭配使用,可以形成下拉列表供用户选择。随着用户不断键入,会缩小显示范围,只显示匹配的备选项。

<input id="myURL" name="myURL" type="url"
       list="defaultURLs">

<datalist id="defaultURLs">
  <option value="https://developer.mozilla.org/" label="MDN Web Docs">
  <option value="http://www.google.com/" label="Google">
  <option value="http://www.microsoft.com/" label="Microsoft">
  <option value="https://www.mozilla.org/" label="Mozilla">
  <option value="http://w3.org/" label="W3C">
</datalist>

上面代码中, <option>label 属性表示文本标签,显示在备选下拉框的右侧,网址显示在左侧。

(16)tel

type="tel" 是一个只能输入电话号码的输入框。由于全世界的电话号码格式都不相同,因此浏览器没有默认的验证模式,大多数时候需要自定义验证。

<input type="tel" id="phone" name="phone"
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
       required>

<small>Format: 123-456-7890</small>

上面代码定义了一个只能输入10位电话号码的输入框。

该类型的配套属性如下。

  • maxlength :允许的最大字符数。

  • minlength :允许的最少字符串。

  • pattern :输入内容必须匹配的正则表达式。

  • placeholder :输入为空时显示的示例文本。

  • readonly :布尔属性,表示该控件的内容是否只读。

  • size :一个非负整数,表示该输入框显示宽度为多少个字符。

(17)color

type="color" 是一个选择颜色的控件,它的值一律都是 #rrggbb 格式。

<input type="color" id="background" name="background"
           value="#e66465">

上面代码在 Chrome 浏览器中,会显示一个 #e66465 的色块。点击色块,就会出现一个拾色器,供用户选择颜色。

如果没有指定 value 属性的初始值,默认值为 #000000 (黑色)。

(18)date

type="date" 是一个只能输入日期的输入框,用户可以输入年月日,但是不能输入时分秒。输入格式是 YYYY-MM-DD

<input type="date" id="start" name="start"
       value="2018-07-22"
       min="2018-01-01" max="2018-12-31">

上面代码会显示一个输入框,默认日期是2018年7月22日。用户点击以后,会日期选择器,供用户选择新的日期。

该类型有以下配套属性。

  • max :可以允许的最晚日期,格式为 yyyy-MM-dd

  • min :可以允许的最早日期,格式为 yyyy-MM-dd

  • step :步长值,一个数字,以天为单位。

(19)time

type="time" 是一个只能输入时间的输入框,可以输入时分秒,不能输入年月日。日期格式是24小时制的 hh:mm ,如果包括秒数,格式则是 hh:mm:ss 。日期选择器的形式则随浏览器不同而不同。

<input type="time" id="appt" name="appt"
       min="9:00" max="18:00" required>

<small>营业时间上午9点到下午6点</small>

该类型有以下配套属性。

  • max :允许的最晚时间。

  • min :允许的最早时间。

  • readonly :布尔属性,表示用户是否不可以编辑时间。

  • step :步长值,单位为秒。

<input id="appt" type="time" name="appt" step="2">

上面代码中,调节控件的话,时间每次改变的幅度是2秒钟。

(20)month

type="month" 是一个只能输入年份和月份的输入框,格式为 YYYY-MM

<input type="month" id="start" name="start"
       min="2018-03" value="2018-05">

该类型有以下配套属性。

  • max :允许的最晚时间,格式为 yyyy-MM

  • min :允许的最早时间,格式为 yyyy-MM

  • readonly :布尔属性,表示用户是否不可以编辑时间。

  • step :步长值,单位为月。

(21)week

type="week" 是一个输入一年中第几周的输入框。格式为 yyyy-Www ,比如 2018-W18 表示2018年第18周。

<input type="week" name="week" id="camp-week"
       min="2018-W18" max="2018-W26" required>

该类型有以下配套属性。

  • max :允许的最晚时间,格式为 yyyy-Www

  • min :允许的最早时间,格式为 yyyy-Www

  • readonly :布尔属性,表示用户是否不可以编辑时间。

  • step :步长值,单位为周。

(22)datetime-local

type="datetime-local" 是一个时间输入框,让用户输入年月日和时分,格式为 yyyy-MM-ddThh:mm 。注意,该控件不支持秒。

<input type="datetime-local" id="meeting-time"
       name="meeting-time" value="2018-06-12T19:30"
       min="2018-06-07T00:00" max="2018-06-14T00:00">

该类型有以下配套属性。

  • max :允许的最晚时间,格式为 yyyy-MM-ddThh:mm

  • min :允许的最早时间,格式为 yyyy-MM-ddThh:mm

  • step :步长值,单位为秒,默认值是60。

<button>

<button> 标签会生成一个可以点击的按钮,没有默认行为,通常需要用 type 属性或脚本指定按钮的功能。

<button>点击</button>

上面代码会产生一个按钮,上面的文字就是“点击”。

<button> 内部不仅放置文字,还可以放置图像,这可以形成图像按钮。

<button name="search" type="submit">
  <img src="search.gif">搜索
</button>

<button> 具有以下属性。

  • autofocus :布尔属性,表示网页加载时,焦点就在这个按钮。网页里面只能有一个元素,具有这个属性。

  • disabled :布尔属性,表示按钮不可用,会导致按钮变灰,不可点击。

  • name :按钮的名称(与 value 属性配合使用),将以 name=value 的形式,随表单一起提交到服务器。

  • value :按钮的值(与 name 属性配合使用),将以 name=value 的形式,随表单一起提交到服务器。

  • type :按钮的类型,可能的值有三种: submit (点击后将数据提交给服务器), reset (将所有控件的值重置为初始值), button (没有默认行为,由脚本指定按钮的行为)。

  • form :指定按钮关联的 <form> 表单,值为 <form>id 属性。如果省略该属性,默认关联按钮所在父表单。

  • formaction :数据提交到服务器的目标 URL,会覆盖 <form> 元素的 action 属性。

  • formenctype :数据提交到服务器的编码方式,会覆盖 <form> 元素的 enctype 属性。可能的值有三种: application/x-www-form-urlencoded (默认值), multipart/form-data (只用于文件上传), text/plain

  • formmethod :数据提交到服务器使用的 HTTP 方法,会覆盖 <form> 元素的 method 属性,可能的值为 postget

  • formnovalidate :布尔属性,数据提交到服务器时关闭本地验证,会覆盖 <form> 元素的 novalidate 属性。

  • formtarget :数据提交到服务器后,展示服务器返回数据的窗口,会覆盖 <form> 元素的 target 属性。可能的值有 _self (当前窗口), _blank (新的空窗口)、 _parent (父窗口)、 _top (顶层窗口)。

<select>

<select> 标签用于生成一个下拉菜单。

<label for="pet-select">宠物:</label>

<select id="pet-select" name="pet-select">
  <option value="">--请选择一项--</option>
  <option value="dog">狗</option>
  <option value="cat">猫</option>
  <option value="others">其他</option>
</select>

上面代码中, <select> 生成一个下拉菜单,菜单标题是“--请选择一项--”,最右侧有一个下拉箭头。点击下拉箭头,会显示三个菜单项,供用户点击选择。

下拉菜单的菜单项由 <option> 标签给出,每个 <option> 代表可以选择的一个值。选中的 <option>value 属性,就是 <select> 控件发送的服务器的值。

<option> 有一个布尔属性 selected ,一旦设置,就表示该项是默认选中的菜单项。

<select name="choice">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</select>

上面代码中,第二项 Second Value 是默认选中的。页面加载的时候,会直接显示在下拉菜单上。

<select> 有如下属性。

  • autofocus :布尔属性,页面加载时是否自动获得焦点。

  • disabled :布尔属性,是否禁用当前控件。

  • form :关联表单的 id 属性。

  • multiple :布尔属性,是否可以选择多个菜单项。默认情况下,只能选择一项。一旦设置,多数浏览器会显示一个滚动列表框。用户可能需要按住 Shift 或其他功能键,选中多项。

  • name :控件名。

  • required :布尔属性,是否为必填控件。

  • size :设置了 multiple 属性时,页面显示时一次可见的行数,其他行需要滚动查看。

<option><optgroup>

<option> 标签用在 <select><optgroup><datalist> 里面,表示一个菜单项,参见 <select> 的示例。

它有如下属性。

  • disabled :布尔属性,是否禁用该项。

  • label :该项的说明。如果省略,则等于该项的文本内容。

  • selected :布尔属性,是否为默认值。显然,一组菜单中,只能有一个菜单项设置该属性。

  • value :该项提交到服务器的值。如果省略,则等于该项的文本内容。

    <optgroup> 表示菜单项的分组,通常用在 <select> 内部。

<label>宠物:
  <select name="pets" multiple size="4">
    <optgroup label="四条腿的宠物">
      <option value="dog">狗</option>
      <option value="cat">猫</option>
    </optgroup>
    <optgroup label="鸟类">
      <option value="parrot">鹦鹉</option>
      <option value="thrush">画眉</option>
    </optgroup>
  </select>
</label>

上面代码中, <select> 是一个下拉菜单,它的内部使用 <optgroup> 将菜单项分成两组。每组有自己的标题,会加粗显示,但是用户无法选中。

它的属性如下。

  • disabled :布尔设置,是否禁用该组。一旦设置,该组所有的菜单项都不可选。

  • label :菜单项分组的标题。

<datalist>

<datalist> 标签是一个容器标签,用于为指定控件提供一组相关数据,通常用于生成输入提示。它的内部使用 <option> ,生成每个菜单项。

<label for="ice-cream-choice">冰淇淋:</label>
<input type="text" list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice">

<datalist id="ice-cream-flavors">
  <option value="巧克力">
  <option value="椰子">
  <option value="薄荷">
  <option value="草莓">
  <option value="香草">
</datalist>

上面代码中, <input> 生成一个文本输入框,用户可以输入文本。 <input>list 属性指定关联的 <datalist>id 属性。 <datalist> 的数据列表用于输入建议,用户点击输入框的时候,会显示一个下拉菜单,里面是建议的输入项。并且还会自动匹配用户已经输入的字符,缩小可选的范围,比如用户输入“香”,则只会显示“香草”这一项。

注意, <option> 在这里可以不需要闭合标签。

<option> 标签还可以加入 label 属性,作为说明文字。Chrome 浏览器会将其显示在 value 的下一行。

<datalist id="ide">
  <option value="Brackets" label="by Adobe">
  <option value="Coda" label="by Panic">
</datalist>

上面代码的渲染结果是,Chrome 浏览器会在下拉列表显示 value 值(比如 Brackets ),然后在其下方以小字显示 label 值(比如 by Adobe )。

<textarea>

<textarea> 是一个块级元素,用来生成多行的文本框。

<textarea id="story" name="story"
          rows="5" cols="33">
这是一个很长的故事。
</textarea>

上面代码会生成一个长度为5行,宽度为33个字符的文本框。

该标签有如下属性。

  • autofocus :布尔属性,是否自动获得焦点。

  • cols :文本框的宽度,单位为字符,默认值为20。

  • disabled :布尔属性,是否禁用该控件。

  • form :关联表单的 id 属性。

  • maxlength :允许输入的最大字符数。如果未指定此值,用户可以输入无限数量的字符。

  • minlength :允许输入的最小字符数。

  • name :控件的名称。

  • placeholder :输入为空时显示的提示文本。

  • readonly :布尔属性,控件是否为只读。

  • required :布尔属性,控件是否为必填。

  • rows :文本框的高度,单位为行。

  • spellcheck :是否打开浏览器的拼写检查。可能的值有 true (打开), default (由父元素或网页设置决定), false (关闭)。

  • wrap :输入的文本是否自动换行。可能的值有 hard (浏览器自动插入换行符 CR + LF ,使得每行不超过控件的宽度), soft (输入内容超过宽度时自动换行,但不会加入新的换行符,并且浏览器保证所有换行符都是 CR + LR ,这是默认值), off (关闭自动换行,单行长度超过宽度时,会出现水平滚动条)。

<output>

<output> 标签是一个行内元素,用于显示用户操作的结果。

<input type="number" name="a" value="10"> +
<input type="number" name="b" value="10"> =
<output name="result">20</output>

该标签有如下属性。

  • for :关联控件的 id 属性,表示为该控件的操作结果。

  • form :关联表单的 id 属性。

  • name :控件的名称。

<progress>

<progress> 标签是一个行内元素,表示任务的完成进度。浏览器通常会将显示为进度条。

<progress id="file" max="100" value="70"> 70% </progress>

该标签有如下属性。

  • max :进度条的最大值,应该是一个大于 0 的浮点数。默认值为1。

  • value :进度条的当前值。它必须是 0max 属性之间的一个有效浮点数。如果省略了 max 属性,该值则必须在 01 之间。如果省略了 value 属性,则进度条会出现滚动,表明正在进行中,无法知道完成的进度。

<meter>

<meter> 标签是一个行内元素,表示指示器,用来显示已知范围内的一个值,很适合用于任务的当前进度、磁盘已用空间、充电量等带有比例性质的场合。浏览器通常会将其显示为一个不会滚动的指示条。

<p>烤箱的当前温度是<meter min="200" max="500"
  value="350"> 350 度</meter>。</p>

上面代码会显示一个指示条,左侧表示 200 ,右侧表示 500 ,当前位置停留在 350

注意, <meter> 元素的子元素,正常情况下不会显示。只有在浏览器不支持 <meter> 时才会显示。

该标签有如下属性。

  • min :范围的下限,必须小于 max 属性。如果省略,则默认为 0

  • max :范围的上限,必须大于 min 属性。如果省略,则默认为 1

  • value :当前值,必须在 min 属性和 max 属性之间。如果省略,则默认为 0

  • low :表示“低端”的上限门槛值,必须大于 min 属性,小于 high 属性和 max 属性。如果省略,则等于 min 属性。

  • high :表示“高端”的下限门槛值,必须小于 max 属性,大于 low 属性和 min 属性。如果省略,则等于 max 属性。

  • optimum :指定最佳值,必须在 min 属性和 max 属性之间。它应该与 low 属性和 high 属性一起使用,表示最佳范围。如果 optimum 小于 low 属性,则表示“低端”是最佳范围;如果大于 high 属性,则表示“高端”是最佳范围;如果在 lowhigh 之间,则表示“中间地带”是最佳范围。如果省略,则等于 minmax 的中间值。

  • form :关联表单的 id 属性。

Chrome 浏览器使用三种颜色,表示指示条所处的位置。较好情况时,当前位置为绿色;一般情况时,当前位置为黄色;较差情况时,当前位置为红色。

<meter id="fuel" name="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</meter>

上面代码中,指示条可以分成三段:0 ~ 32,33 ~ 65,66 ~ 100。由于 optimum 属性是 80 ,因此 66 ~ 100 是较好情况, 33 ~ 65 是一般情况, 0 ~ 32 是较差情况。浏览器因此会根据 value 属性,将当前位置显示为不同颜色,小于 33 时显示红色,大于 65 时显示绿色,两者之间显示黄色。

参考链接

分享到:

#免责声明#

版权声明:《 13. 表单标签 》为作者 知付 原创文章,转载请注明原文地址!
本站所有文章,如无特殊说明或标注,均为本站原创或整合发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
本文地址:https://www.yoppunion.com/HTML%20%E6%95%99%E7%A8%8B/148.html
同类推荐
评论列表
签到

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

支付宝扫一扫打赏

微信扫一扫打赏

微信扫一扫打赏