HTML 表单输入类型

📌 相关文章

📜 HTML 表单输入类型

📅 最后修改于: 2020-11-01 11:26:09 🧑 作者: Mango

HTML表单输入类型

在HTML中是HTML表单的重要元素。输入元素的“类型”属性可以是各种类型，用于定义信息字段。如给出一个文本框。

以下是所有类型的清单HTML的元素。

type=” “	Description
text	Defines a one-line text input field
password	Defines a one-line password input field
submit	Defines a submit button to submit the form to server
reset	Defines a reset button to reset all values in the form.
radio	Defines a radio button which allows select one option.
checkbox	Defines checkboxes which allow select multiple options form.
button	Defines a simple push button, which can be programmed to perform a task on an event.
file	Defines to select the file from device storage.
image	Defines a graphical submit button.

HTML5在上添加了新类型元件。以下是HTML5元素类型的列表

type=” “	Description
color	Defines an input field with a specific color.
date	Defines an input field for selection of date.
datetime-local	Defines an input field for entering a date without time zone.
email	Defines an input field for entering an email address.
month	Defines a control with month and year, without time zone.
number	Defines an input field to enter a number.
url	Defines a field for entering URL
week	Defines a field to enter the date with week-year, without time zone.
search	Defines a single line text field for entering a search string.
tel	Defines an input field for entering the telephone number.

以下是有关类型的说明带有示例的元素。

1。：

类型为“文本”的元素用于定义单行输入文本字段。

例：


    Enter first name

    

    Enter last name

    

    Note:The default maximum cahracter lenght is 20.

输出：

Input “text” type:

The “text”field defines a sinlge line input text field.

2。：

的类型为“ password”的元素允许用户在网页中安全地输入密码。密码文件中输入的文本将转换为“ *”或“。”，以便其他用户无法读取。

例：


    Enter User name

    

    Enter Password

输出：

Input “password” type:

The “password”field defines a sinlge line input password field to enter the password securely.

3。：

的类型“ submit”的元素定义一个提交按钮，以在发生“ click”事件时将表单提交给服务器。

例：


    Enter User name

    

    Enter Password

输出：

Input “submit” type:

After clicking on submit button, this will submit the form to server and will redirect the page to action value.We will learn about “action” attribute in later chapters

4。：

的类型“重置”也定义为按钮，但是当用户执行单击事件时，默认情况下它将重置所有输入的值。

例：


    User id: 
     
              Password:

输出：

Input “reset” type:

Try to change the input values of user id and password, then when you click on reset, it will reset input fields with default values.

5，：

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

例：


  Kindly Select your favorite color
   Red 

   blue 

  green 

  pink

输出：

Input “radio” type

6。：

的类型“复选框”显示为方形框，可以选中或取消选中这些框以从给定选项中选择选项。

注意：“单选”按钮类似于复选框，但是两种类型之间有一个重要区别：单选按钮允许用户一次仅选择一个选项，而复选框使用户一次可以选择零到多个选项。

例：

 
       Enter your Name:
       
      Kindly Select your favourite sports
      Cricket

      Tennis

      Football

      Baseball

      Badminton

输出：

Input “checkbox” type

Registration Form

7。：

的类型“按钮”定义了一个简单的按钮，可以对其进行编程以在功能上控制任何事件，例如单击事件。

注意：它主要适用于JavaScript。

例：

输出：

Input “button” type.

Click the button to see the result:

注意：在上面的示例中，我们使用了JS的“警报”，您将在我们的JS教程中学习。它用于显示弹出窗口。

8。：

的类型为“文件”的元素用于从用户设备存储中选择一个或多个文件。选择文件后，提交后，可以在JS代码和文件API的帮助下将该文件上传到服务器。

例：


     Select file to upload:

输出：

Input “file” type.

We can choose any type of file until we do not specify it! The selected file will appear at next to “choose file” option

9。：

的类型“图像”用于表示图像形式的提交按钮。

例：




Input "image" type.
We can create an image as submit button
  
    User id:

新增HTML5类型元素

1。：

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

注意：“颜色”类型仅支持十六进制格式的颜色值，默认值为＃000000(黑色)。

例：


    Pick your Favorite color: 


     Upclick


     Downclick

输出：

Input “color” types:

Note:The default value of “color” type is #000000 (black). It only supports color value in hexadecimal format.

2。：

的类型为“日期”的元素生成一个输入字段，该字段允许用户以给定格式输入日期。用户可以按文本字段或按日期选择器界面输入日期。

例：


    Select Start and End Date: 


       Start date:


       End date:

输出：

Input “date” type

3。：

的类型为“ datetime-local”的元素会创建输入字段，该字段允许用户选择时区和小时中的日期以及本地时间，而无需时区信息。

例：


     
      Select the meeting schedule: 


      Select date & time:

输出：

Input “datetime-local” type

4。：

的类型“电子邮件”将创建一个输入字段，该字段允许用户使用模式验证输入电子邮件地址。多个属性允许用户输入多个电子邮件地址。

例：


         Enter your Email-address
        
        
         Note:User can also enter multiple email addresses separating by comma or whitespace as following: 
         Enter multiple Email-addresses

输出：

Input “email” type

5，：

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

例：


    Enter your Birth Month-year:

输出：

Input “month” type:

6。：

的元素类型编号创建输入字段，该字段允许用户输入数字值。您还可以使用min和max属性限制输入最小值和最大值。

例：


    Enter your age:

输出：

Input “number” type

Note:It will allow to enter number in range of 50-80. If you want to enter number other than range, it will show an error.

7。：

的类型为“ url”的元素创建一个输入字段，使用户能够输入URL。

例：

  
      Enter your website URL:

输出：

Input “url” type

8。：

的type week创建一个输入字段，该字段允许用户从下拉日历中选择不带时区的星期和年份。

例：


     Select your best week of year:

输出：

Input “week” type

9。：

的类型“ search”创建一个输入字段，该字段允许用户输入搜索字符串。它们在功能上与文本输入类型对称，但可以使用不同的样式。

例：


    Search here:

输出：

Input “search” type

10。：

的tel类型的元素?创建输入文件以输入电话号码。 “电话”类型没有默认验证，例如电子邮件，因为电话号码的格式在全球范围内可能有所不同。

例：


      Enter your Telephone Number(in format of xxx-xxx-xxxx):

输出：

Input “tel” type

Note: Here we are using two attributes that are “pattern” and”required” which will allow user to enter the number in given format and it is required to enter the number in input field.