HTML 教程
HTML 教程
阅读(20.1k) 书签 赞(13) 我要纠错

HTML 表单输入类型

2018-06-16 16:18 更新

HTML表单输入类型

按钮输入

输入元素的提交，重置和按钮类型创建与使用button元素时创建的按钮非常相似的按钮。

创建按钮的输入元素类型如下所示。

  • submit - 创建提交表单的按钮。其他属性：formaction，formenctype，formmethod，formtarget，formnovalidate。
  • reset - 创建用于重置表单的按钮。
  • button - 创建不执行任何操作的按钮。

使用提交类型时可用的其他属性与使用submitbutton元素时相同。

重置和按钮类型不定义任何其他属性。

对于这三种输入类型，按钮上显示的标签取自value属性。

以下代码使用输入元素创建按钮：

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: <input value="XML" id="name"
        name="name" />
      </label>
    </p>
    <p>
      <label for="password"> Password: 
      <input type="password" placeholder="Min 6  characters" id="password" name="password" />
      </label>
    </p>
    <p>
      <label for="fave"> Fruit: 
      <input value="Apples" id="fave" name="fave" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" /> 
    <input type="reset" value="Reset Form" /> 
    <input type="button" value="My Button" />
  </form>
</body>
</html>

输入按钮元素不能使用按钮元素显示标记的文本。

密码输入

将type属性设置为password会创建用于输入密码的输入元素。

用户键入的字符由掩码字符，例如星号(*)表示。

密码输入元素可以具有以下附加属性。其中许多都与文本类型共享，并以相同的方式工作。

  • maxlength - 设置用户可以在密码框中输入的最大字符数。
  • pattern - 指定用于输入验证的正则表达式模式。
  • placeholder - 指定一个提示，告诉用户您希望输入的种类。
  • readonly - 如果存在，则使密码框为只读，并且用户无法编辑内容。
  • required - 指定用户必须输入值以进行输入验证。
  • size - 指定元素的宽度，以字符数表示。
  • value - 指定密码的初始值。

以下代码显示正在使用的密码类型。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: 
      <input value="XML" id="name" name="name" />
      </label>
    </p>
    <p>
      <label for="password"> Password: 
      <input type="password" placeholder="Min 6 characters" id="password" name="password" />
      </label>
      
        <br />Another Password: 
       <input type="password" 
              name="pwdPassword" 
              value="" 
                  size="20" 
                  maxlength="20" /><br />      
    </p>
    <p>
      <label for="fave"> Fruit: 
      <input value="Apples" id="fave" name="fave" />
      </label>
    </p>
    <button type="submit">Submit Vote</button>
  </form>
</body>
</html>

限制数据项输入

HTML5为输入元素的type属性引入了新值，我们可以从用户收集更多特定数据。

以下列表总结了这些新类型值。

  • checkbox - 将输入限制为true / false复选框。
  • color - 将输入限制为颜色。
  • date - 将输入限制为日期。
  • datetime - 将输入限制为具有时区的全球日期和时间。
  • datetime-local - 将输入限制为不带时区的全局日期和时间。
  • email - 将输入限制为格式正确的电子邮件地址。
  • month - 将输入限制为年和月。
  • number - 将输入限制为整数或浮点数。
  • radiobutton - 将输入限制为固定的选项集。
  • range - 将输入限制为指定范围。
  • tel - 将输入限制为格式正确的电话号码。
  • time - 将输入限制为一天中的时间。
  • week - 将输入限制为年和周。
  • url - 将输入限制为完全限定的URL。

数字输入

type属性的数字值创建一个只接受数字值的输入框。

以下列表描述了使用数字输入类型时可用的其他属性。

  • list - 设置为此元素提供值的datalist元素的id。
  • min - 为输入验证目的设置最小值。
  • max - 设置用于输入验证目的的最大值。
  • readonly - 如果存在，则使输入框为只读，并且用户无法编辑内容。
  • required - 用户必须提供用于输入验证目的的值。
  • step - 将增量和减量的步长设置为该值。
  • value - 指定元素的初始值。

min，max，step和value属性的值可以是表示为整数或十进制数；例如，3和3.14。

以下代码显示正在使用的输入的数字类型。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="price"> $ per unit in your area: <input
        type="number" step="1" min="0" max="100" value="1" id="price"
        name="price" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

范围输入

我们可以使用输入元素的范围类型来获取数值。

范围输入元素的值限制用户从预定范围中选择值。

范围类型支持与数字类型相同的一组属性。

以下代码显示了使用的范围类型。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="price"> $ per unit in your area: 1 <input
        type="range" step="1" min="0" max="100" value="1" id="price"
        name="price" />100
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

复选框输入

输入元素的复选框类型创建一个复选框，允许用户进行真/假选择。

type属性的此值支持以下列表中显示的其他属性。

  • checked - 如果应用，请在最初显示时或表单重置时选中复选框。
  • required - 指定用户必须选中复选框。
  • value - 设置在选中复选框时提交到服务器的值。

以下代码显示了正在使用的输入元素的复选框类型。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="veggie"> Are you vegetarian:
      <input type="checkbox" id="veggie" name="veggie" />
      </label>
    </p>
    <p>
    Which of the following skills do you possess? Select all that apply.<br />
    <input checked type="checkbox" name="chkSkills" value="html" />HTML <br /> 
    <input type="checkbox" name="chkSkills" value="xhtml" />XHTML <br /> 
    <input type="checkbox" name="chkSkills" value="CSS" />CSS<br /> 
    <input checked type="checkbox" name="chkSkills" value="JavaScript" />JavaScript<br />
    <input type="checkbox" name="chkSkills" value="aspnet" />ASP.Net<br />
    <input checked type="checkbox" name="chkSkills" value="php" />PHP    
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

radio输入

输入元素的 radio 类型创建一组单选按钮，让用户从一组固定的选项中进行选择。

以下列表描述了radio类型输入元素支持的其他属性。

  • checked - 如果应用，请在最初显示时或表单重置时选择单选按钮。
  • required - 用户必须选择一个单选按钮。
  • value - 指定复选框被选中时提交给服务器的数据值。

具有类型radio的每个输入元素向用户表示单个选项。

一组独占选项应该具有与name属性相同的值。

你可以在下面的代码中看到它是如何工作的。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
    <fieldset>
      <legend>Vote for your favorite fruit</legend>
      <label for="apples">
        <input type="radio" checked value="Apples" id="apples" name="fave" /> Apples
      </label>
      <label for="oranges">
         <input type="radio" value="Oranges" id="oranges" name="fave" /> Oranges
      </label>
      <label for="cherries">
         <input type="radio" value="Cherries" id="cherries" name="fave" /> Cherries
      </label>
    </fieldset>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

上面的代码创建了三个radio类型输入元素。

所有三个的name属性的值都是fave，这意味着浏览器会将它们视为一个组。

选择其中一个单选按钮将取消选择其他两个。 value属性设置在提交表单时要发送到服务器的数据值。

Fieldset 和 legend 属性为用户提供三个按钮相关的视觉提示。

在第一个radio元素上设置checked属性，以便始终选择一个值。

电子邮件输入

电子邮件类型值将输入元素配置为仅接受作为有效电子邮件地址的输入。

它支持以下列表中显示的其他属性。

  • list - 设置为元素提供值的数据表元素的ID。
  • maxlength - 指定用户可以在文本框中输入的最大长度。
  • pattern - 指定用于输入验证的正则表达式模式。
  • placeholder - 向用户指定提示。
  • readonly - 如果存在，请将文本框设置为只读。
  • required - 指定用户必须提供值。
  • size - 指定元素的宽度。
  • value - 指定元素的初始值。对于电子邮件类型，可以是单个地址，也可以是由逗号分隔的多个地址。

电子邮件类型还支持 multiple 属性，当应用时，允许输入元素接受多个电子邮件地址。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="email"> Email: <input type="email"
        placeholder="user@domain.com" id="email" name="email" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

tel输入

tel类型值将输入元素配置为仅接受输入，其是电话号码。

它支持以下列表中显示的其他属性。

  • list - 设置为元素提供值的数据表元素的ID。
  • maxlength - 指定用户可以在文本框中输入的最大长度。
  • pattern - 指定用于输入验证的正则表达式模式。
  • placeholder - 向用户指定提示。
  • readonly - 如果存在，请将文本框设置为只读。
  • required - 指定用户必须提供值。
  • size - 指定元素的宽度。
  • value - 指定元素的初始值。

以下代码显示如何使用 tel 输入。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">

    <p>
      <label for="tel"> Tel: <input type="tel"
        placeholder="(XXX)-XXX-XXXX" id="tel" name="tel" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

url输入

url类型值将输入元素配置为仅接受作为URL的输入。

它支持以下列表中显示的其他属性。

  • list - 设置为元素提供值的数据表元素的ID。
  • maxlength - 指定用户可以在文本框中输入的最大长度。
  • pattern - 指定用于输入验证的正则表达式模式。
  • placeholder - 向用户指定提示。
  • readonly - 如果存在，请将文本框设置为只读。
  • required - 指定用户必须提供值。
  • size - 指定元素的宽度。
  • value - 指定元素的初始值。

以下代码显示了如何使用 url 输入。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">

    <p>
      <label for="url"> Your homepage: <input type="url" id="url"
        name="url" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

时间日期输入

HTML5引入了一些输入元素类型来从用户收集日期和时间。以下列表描述了这些输入类型。

  • datetime - 获取全局日期和时间，包括时区。
    例如:2014-07-19T16:42:39.421Z
  • datetime-local - 获取本地日期和时间（没有时区信息）。
    例如:2014-07-19T16:42:39.421
  • date - 获取本地日期（没有时间或时区）。
    例如:2014-07-20
  • month - 获取年份和月份（无日期，时间或时区信息）。
    例如:2014-08
  • time - 获得时间。
    例如:17:42:44.746
  • week - 获取当前周。
    例如:2011-W30

以下列表具有可用于“日期和时间”输入元素类型的其他属性。

  • list -设置为元素提供值的数据表元素的ID。
  • min - 设置最小可接受值。
  • max - 设置最大可接受值。
  • readonly - 将文本框标记为只读。
  • required - 指定用户必须提供值。
  • step - 指定该值的增量和减量的粒度。
  • value - 指定元素的初始值。

以下代码显示正在使用的日期类型。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="lastbuy"> When did you last buy:
      <input type="date" id="lastbuy" name="lastbuy" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

颜色输入

输入元素的颜色类型限制用户选择颜色。

颜色值正好表示为七个字符：前导＃，后跟三个两位十六进制值，表示红色，绿色和蓝色值（例如，＃FF1234）。

您可以在以下代码中看到正在使用的此类型的输入元素。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="color"> Color:
      <input type="color" id="color" name="color" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

搜索输入

输入元素的搜索类型向用户呈现用于输入搜索词语的单行文本框。

以下代码显示如何使用搜索输入。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="search"> Search: <input type="search" id="search"
        name="search" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

隐藏输入

要将数据项发送到服务器而不向用户显示，请使用隐藏的输入元素。

以下代码显示了如何使用此类型的输入元素。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <input type="hidden" name="recordID" value="1234" />
    <input type="submit" value="Submit Vote" />
  </form>
</body>
</html>

图像输入

输入元素的图像类型创建显示图像并在单击时提交表单的按钮。

这种类型的输入元素支持以下所示的附加属性。

  • alt - 提供元素的文本描述。
  • formaction - 对于按钮元素
  • formenctype - 对于按钮元素
  • formmethod - 对于按钮元素
  • formtarget - 对于按钮元素
  • formnovalidate - 对于按钮元素
  • height - 指定图像的高度（以像素为单位）。
  • src - 指定应显示的图像的URL。
  • width - 指定图像的宽度（以像素为单位）。

以下代码显示了正在使用的输入元素的图像类型。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: <input value="XML" id="name"
        name="name" />
      </label>
    </p>
    <input type="image" src="accept.png" name="submit" />
  </form>
</body>
</html>

当用户点击图像时，浏览器提交表单并且包括表示用户相对于图像的左上角点击的x和y坐标的两个数据项。

提供坐标以表示图像上的不同区域。

文件上传输入

文件输入元素在表单提交期间将文件上传到服务器。

这种类型的输入支持如下所示的附加属性。

  • accept - 指定将接受的MIME类型集。 RFC2046定义MIME类型（http://tools.ietf.org/html/rfc2046）。
  • multiple - 指定输入元素可以上传多个文件。在写作的时候，没有一个主流浏览器实现了这个属性。
  • required - 指定用户必须提供用于输入验证目的的值。

以下代码显示正在使用的输入元素的文件类型。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form"
    enctype="multipart/form-data">
    <p>
      <input type="file" name="filedata" />
    </p>
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

只有当表单的编码类型为multipart/form-data时，才能上传文件。

当用户单击“选择文件”按钮时，将显示一个允许选择文件的对话框。

当表单提交时，文件的内容将被发送到服务器。

以上内容是否对您有帮助：
← HTML 表单输入
HTML 表单选择 →

推荐文章

推荐教程

推荐课程

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号