Input element label

Input The element tag

Input Express Form An input object in a form , And then with Type Different types of text input box , Password input box , The radio / Check box , Submit / Reset button, etc

1、type=text
　　 The input type is text, This is the most we have seen and used , For example, log in and enter the user name , Sign up and enter the phone number , E-mail , Home address, etc . And of course this is also Input Default type of .

Parameters ：name： The same is the name of the text input box .
　　　　　size： The length and size of the input box .
　　　　　maxlength： The maximum number of characters allowed in the input box .
　　　　　value： The default value in the input box
　　　　　readonly： Indicates that only , You can't add or modify .

  <form action="">
     full name 1：<input type="text" name="yourname" size="30" maxlength="20" value=" The length of the input box is 30, The maximum number of characters allowed is 20"><br>
     full name 2：<input type="text" name="yourname" size="30" maxlength="20" readonly value=" You can only read, not modify "><br>
  </form>

The renderings are as follows ：

2、type=password
　　 Password input box , The difference is that when entering information in this input box, it is displayed as confidential characters

<form action="">
     password ：<input type="password" name="yourpwd" size="20" maxlength="15" value="123456"> The password length is less than 15
 </form>

The renderings are as follows ：

3、type=file
　　 When you are in BBS To upload pictures , stay EMAIL There must be something indispensable when uploading attachments in ：） Provides a file directory input platform , Parameters have name,size

  <form action="">
     file ：<input type="file" name="yourfile" size="30">
  </form>

The renderings are as follows ：

4、type=hidden
　　 Hidden fields ： If a very important message needs to be submitted to the next page , But when it can't or can't be expressed .

  <form action="">
     hide ：<input type="hidden" name="yourhiddeninfo" id="yourhiddeninfo" value="cnbruce.com">
    <button id="button"> Show hidden content </button>
  </form>

The renderings are as follows ：

5、type=button

A part of the standard windows Style buttons , Of course, to make the button jump to a certain page, you need to add write JavaScript Code

<form action="">
     Button ：<input type="button" name="yourhiddeninfo" value=" Button " onclick="window.open('https://www.baidu.com/')">
  </form>

The renderings are as follows ：

6、type=button

Checkbox , It is common to choose a hobby when registering 、 character 、 Etc . Parameters have name,value And special parameters checked（ Indicates the default choice ）
In fact, the most important thing is value value , The one submitted to the processing page is value.（ attach ：name The values can be different , But it is not recommended. .）

  <form action="">
     Apple :<input type="checkbox" name="checkit" value=" Apple " checked><br>
     Snow pear :<input type="checkbox" name="checkit" value=" Snow pear "><br>
     watermelon :<input type="checkbox" name="checkit" value=" watermelon "><br>
  </form>

The renderings are as follows ：

7、type=radio

The radio box , It appears in the multiple choice page settings . Parameters also have name,value And special parameters checked.
differ checkbox Yes. ,name The values must be the same , Otherwise, you can't choose one more . Of course, the one submitted to the processing page is value value .

<form action="">
     Apple :<input type="radio" name="checkit" value=" Apple " checked><br>
     Snow pear :<input type="radio" name="checkit" value=" Snow pear "><br>
     watermelon :<input type="radio" name="checkit" value=" watermelon "><br>
  </form>

The renderings are as follows ：

8、type=image

Can be used as a submitted image

<form action="">
　　<input type="image" src="https://ss0.baidu.com/73t1bjeh1BF3odCf/it/u=3466314416,2888444446&fm=73">
</form>

The renderings are as follows ：

9、type=submit and type=reset

Namely “ Submit ” and “ Reset ” Two buttons submit The main function is to Form Submit all contents in action Page handling ,reset Then it has a function of quickly emptying all filled contents .

<form action="">
   <input type="text" name="yourname">
　 <input type="submit" value=" Submit ">
　　<input type="reset" value=" Reset ">
</form>

The renderings are as follows ：

types
The way we work depends largely on type The value of the property , Different type Values will be introduced in their respective reference pages . If this property is not specified , The default type used is text.

Available values include ：

Type	describe	Spec
button	Buttons without default behavior , Shown above value The value of the property , The default is empty. .
checkbox	Check box , Can be set to checked or unchecked .
color	The control used to specify the color ; In supported browsers , When activated, the color Finder will be turned on .	HTML5
date	A control for entering a date （ year 、 month 、 Japan , Not including time ）. Open the date selector or the number wheel of month, year and day when the supported browser is activated .	HTML5
datetime-local	Control for entering date and time , Excluding time zone . Open the date selector or the number wheel of month, year and day when the supported browser is activated .	HTML5
email	Edit the area of the email address . similar text Input , However, there will be confirmation parameters and corresponding keyboards on supported browsers and devices with dynamic keyboards .
file	Controls that let users select files . Use accept Property specifies the file type that the control can select .
hidden	Controls that are not displayed , Its value will still be submitted to the server . for instance , On the right is an invisible control .
image	With images submit Button . The image displayed is by src Property rules . If src defect ,alt The properties will be displayed .
month	Control for entering year and month , No time zone .	HTML5
number	A control for entering numbers . If you support it , Scroll buttons are displayed and default validation is provided （ That is, you can only enter numbers ）. Numeric keyboards are displayed on devices with dynamic keyboards .
password	Single line text area , Its value will be masked . If the site is not secure , Will warn the user .
radio	Radio button , It is allowed to have the same... In multiple name Select one of the options of value .
range	This control does not require precise input of numbers . Control is a scope component , The default value is the value in the middle . Use at the same time htmlattrdefmin and htmlattrdefmax To specify the range of values .	HTML5
reset	This button resets all the contents of the form to the default values . Not recommended .
search	A single line of text area used to search for strings . Line breaks in input text are automatically removed . There may be a delete button in supported browsers , Used to clear the entire area . The enter icon on a device with a dynamic keyboard will become a search icon .	HTML5
submit	Button for submitting form .
tel	Control for entering a phone number . The telephone numeric keypad will be displayed on devices with a dynamic keyboard .	HTML5
text	The default value is . Single line text area , Line breaks in input are automatically removed .
time	Controls for entering time , Excluding time zone .	HTML5
url	For input URL Control for . similar text Input , But there are validation parameters , There are corresponding keyboards on devices that support dynamic keyboards .	HTML5
week	Used to enter a date consisting of years and weeks , No time zone . Obsolete value
datetime	Used to input based on UTC The date and time of the time zone （ when 、 branch 、 Seconds and fractional parts of seconds ）.