HTML表单输入类型

前端 潘老师 7个月前 (10-16) 147 ℃ (0) 扫码查看

在HTML中,<input type=””>是HTML表单的重要元素。<input>元素的”type”属性可以是各种类型,用于定义信息字段。例如,<input type=”text” name=”name”> 创建一个文本框。

<input>所有type列表

以下是HTML中<input>元素的所有type=""的列表

类型 描述
text 定义单行文本输入字段。
password 定义单行密码输入字段。
submit 定义用于将表单提交至服务器的提交按钮。
reset 定义用于重置表单中所有值的重置按钮。
radio 定义单选按钮,允许选择一个选项。
checkbox 定义复选框,允许选择多个选项。
button 定义简单的按钮,可编程执行事件上的任务。
file 定义从设备存储中选择文件的输入字段。
image 定义图形提交按钮。

HTML5 <input>新增类型

HTML5在<input>元素上添加了新类型。以下是HTML5中<input>元素类型的列表,以及带有示例的类型描述。

类型 描述
color 定义一个具有特定颜色的输入字段。
date 定义用于选择日期的输入字段。
datetime-local 定义用于输入无时区日期的输入字段。
email 定义用于输入电子邮件地址的输入字段。
month 定义带有月份和年份但无时区的控件。
number 定义输入数字的输入字段。
url 定义用于输入URL的字段。
week 定义用于输入周-年日期但无时区的字段。
search 定义用于输入搜索字符串的单行文本字段。
tel 定义用于输入电话号码的输入字段。

<input>所有type列表示例

<input type=”text”>:

<input>元素的”type”为”text”用于定义单行输入文本字段。

示例:

<form>  
    <label>Enter first name</label><br>  
    <input type="text" name="firstname"><br>  
    <label>Enter last name</label><br>  
    <input type="text" name="lastname"><br>  
    <p><strong>Note:</strong>The default maximum cahracter lenght is 20.</p>  
</form>  

<input type=”password”>:

<input>元素的”type”为”password”用于允许用户在网页上安全地输入密码。在密码字段中输入的文本会被转换成”*”或”.”,以便其他用户无法阅读。

示例:

<form>  
    <label>Enter User name</label><br>  
    <input type="text" name="firstname"><br>  
    <label>Enter Password</label><br>  
    <input type="Password" name="password"><br>  
    <br><input type="submit" value="submit">  
</form> 

<input type=”submit”>:

<input> 元素的 “submit” 类型定义了一个提交按钮,当发生 “click” 事件时,用于将表单提交到服务器。

例子:

<form action="https://www.javatpoint.com/html-tutorial">  
    <label>Enter User name</label><br>  
    <input type="text" name="firstname"><br>  
    <label>Enter Password</label><br>  
    <input type="Password" name="password"><br>  
    <br><input type="submit" value="submit">  
</form>  

单击提交按钮后,将提交表单到服务器并重定向到 “action” 值。我们将在后面的章节中了解 “action” 属性

<input type=”reset”>:

<input> 的 “reset” 类型也被定义为一个按钮,但当用户执行点击事件时,默认情况下会重置所有输入的值。

例子:

<form>  
    <label>User id: </label>  
     <input type="text" name="user-id" value="user">  
              <label>Password: </label>  
     <input type="password" name="pass" value="pass"><br><br>   
     <input type="submit" value="login">  
      <input type="reset" value="Reset">  
</form>  

尝试更改用户ID和密码的输入值,然后单击重置,它将重置输入字段为默认值。

<input type=”radio”>:

<input> 的 “radio” 类型定义了单选按钮,允许在一组相关选项之间选择一个选项。一次只能选择一个单选按钮选项。

例子:

<form>  
  <p>Kindly Select your favorite color</p>  
  <input type="radio" name="color" value="red"> Red <br>  
  <input type="radio" name="color" value="blue"> blue <br>  
  <input type="radio" name="color" value="green">green <br>  
  <input type="radio" name="color" value="pink">pink <br>  
  <input type="submit" value="submit">  
</form>  

<input type=”checkbox”>:

<input> 的 “checkbox” 类型显示为可以选中或取消选中的方形框,以选择给定选项。

注意:”radio” 按钮类似于复选框,但两者之间有一个重要区别:单选按钮允许用户一次只能选择一个选项,而复选框允许用户一次选择零到多个选项。

例子:

<form>   
      <label>Enter your Name:</label>  
      <input type="text" name="name">  
      <p>Kindly Select your favourite sports</p>  
      <input type="checkbox" name="sport1" value="cricket">Cricket<br>  
      <input type="checkbox" name="sport2" value="tennis">Tennis<br>  
      <input type="checkbox" name="sport3" value="football">Football<br>  
      <input type="checkbox" name="sport4" value="baseball">Baseball<br>  
      <input type="checkbox" name="sport5" value="badminton">Badminton<br><br>  
      <input type="submit" value="submit">  
  </form>  

<input type=”button”>

<input> 的 “button” 类型定义了一个简单的按钮,可以编程控制任何事件上的功能,例如单击事件。

注意:它主要与 JavaScript 一起使用。

例子:

<form>  
     <input type="button" value="Clcik me " onclick="alert('you are learning HTML')">  
</form>  

注意:在上面的例子中,我们使用了JS的 “alert”,你将在我们的JS教程中了解它。它用于显示弹出窗口。

<input type=”file”>:

具有 “file” 类型的 <input> 元素用于从用户设备存储中选择一个或多个文件。一旦选择了文件,并在提交后,可以使用JS代码和文件API将该文件上传到服务器。

例子:

<form>  
     <label>Select file to upload:</label>  
     <input type="file" name="newfile">  
     <input type="submit" value="submit">  
</form>  

输入 “file” 类型。我们可以选择任何类型的文件,直到我们指定它!所选文件将出现在 “选择文件” 选项旁边。

<input type=”image”>:

<input> 的 “image” 类型用于以图像的形式表示提交按钮。

例子:

<!DOCTYPE html>  
<html>  
<body>  
<h2>Input "image" type.</h2>  
<p>We can create an image as submit button</p>  
  <form>  
    <label>User id:</label><br>  
     <input type="text" name="name"><br><br>  
     <input type="image" alt="Submit" src="login.png"  width="100px">  
  </form>  
  
 </body>  
</html>  

HTML5 新增的 <input> 类型元素示例

<input type=”color”>:

<input> 的 “color” 类型用于定义一个包含颜色的输入字段。它允许用户通过浏览器上的视觉颜色界面指定颜色。

注意: “color” 类型仅支持十六进制格式的颜色值,默认值为 #000000(黑色)。

例子:

<form>  
    Pick your Favorite color: <br><br>  
    <input type="color" name="upclick" value="#a52a2a"> Upclick<br><br>  
    <input type="color" name="downclick" value="#f5f5dc"> Downclick  
</form>  

注意: “color” 类型的默认值为 #000000(黑色)。它仅支持十六进制格式的颜色值。

<input type=”date”>:

“date” 类型的 <input> 元素生成一个输入字段,允许用户以给定格式输入日期。用户可以通过文本字段或日期选择器界面输入日期。

例子:

<form>  
    Select Start and End Date: <br><br>  
      <input type="date" name="Startdate"> Start date:<br><br>  
      <input type="date" name="Enddate"> End date:<br><br>  
     <input type="submit">  
</form>  

<input type=”datetime-local”>:

“datetime-local” 类型的 <input> 元素创建一个输入字段,允许用户选择日期以及小时和分钟,不包含时区信息。

例子:

<form>  
    <label>  
      Select the meeting schedule: <br><br>  
      Select date & time: <input type="datetime-local" name="meetingdate"> <br><br>  
    </label>  
      <input type="submit">  
</form>  

<input type=”email”>:

“email” 类型的 <input> 创建一个输入字段,允许用户输入带有模式验证的电子邮件地址。多个属性允许用户输入多个电子邮件地址。

例子:

<form>  
         <label><b>Enter your Email-address</b></label>  
        <input type="email" name="email" required>  
        <input type="submit">  
         <p><strong>Note:</strong>User can also enter multiple email addresses separating by comma or whitespace as following: </p>  
         <label><b>Enter multiple Email-addresses</b></label>  
         <input type="email" name="email"  multiple>  
        <input type="submit">  
</form>     

注意:用户还可以通过逗号或空格分隔输入多个电子邮件地址,

<input type=”month”>:

“month” 类型的 <input> 创建一个输入字段,允许用户轻松输入月份和年份,格式为 “MM, YYYY”,其中 MM 定义月份值,而 YYYY 定义年份值。

例子:

<form>  
    <label>Enter your Birth Month-year: </label>  
    <input type="month" name="newMonth">  
    <input type="submit">  
</form>  

<input type=”number”>:

“number” 类型的 <input> 元素创建一个输入字段,允许用户输入数字值。您还可以使用 “min” 和 “max” 属性限制输入最小值和最大值。

例子:

<form>  
    <label>Enter your age: </label>  
    <input type="number" name="num" min="50" max="80">  
     <input type="submit">  
</form>  

注意:它允许输入范围在50到80之间的数字。如果要输入范围之外的数字,它将显示错误。

<input type=”url”>:

“url” 类型的 <input> 元素创建一个输入字段,允许用户输入URL。

例子:

<form>  
    <label>Enter your website URL: </label>  
    <input type="url" name="website" placeholder="http://www.panziye.com"><br>  
    <input type="submit" value="send data">  
</form>  

<input type=”week”>:

“week” 类型创建一个输入字段,允许用户从下拉日历中选择一周和年份,不包含时区。

例子:

<form>  
    <label><b>Select your best week of year:</b></label><br><br>  
    <input type="week" name="bestweek">  
    <input type="submit" value="Send data">  
 </form>  

<input type=”search”>:

“search” 类型创建一个输入字段,允许用户输入搜索字符串。它们在功能上与文本输入类型相似,但可能具有不同的样式。

例子:

<form>  
    <label>Search here:</label>  
    <input type="search" name="q">  
    <input type="submit" value="search">  
</form>  

<input type=”tel”>:

“tel” 类型的 <input> 元素创建一个输入字段,用于输入电话号码。 “tel” 类型没有默认验证,例如电子邮件,因为电话号码模式可以在全球范围内有所不同。

例子:

<form>  
      <label><b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b></label>  
      <input type="tel" name="telephone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>  
      <input type="submit"><br><br>  
  </form>   

注意:这里我们使用了 “pattern” 和 “required” 两个属性,允许用户按给定格式输入号码,并且在输入字段中必须输入号码。


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/9682.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】