Input type summary, input summary

Input type summary, input summary

In a form, input is the element with the most types. Here we will summarize it.

• Type = text

The input type is text, which is the most common and most commonly used. For example, you can enter the user name, register and enter the phone number, email, home address, and so on. Of course, this is also the default Input type.
Parameter name: the name of the text input box.
Parameter size: the length of the input box.
Maxlength: the maximum number of characters allowed in the input box.
Parameter value: the default value in the input box.
Special parameter readonly: indicates that the box can only be displayed and cannot be added or modified.

<Form> your name: <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> <input type =" text "name =" yourname "size =" 30 "maxlength =" 20 "readonly value =" You can only read modify "> </form>

• Type = password

Needless to say, the biggest difference in the password input box that you can understand at a glance is that the input information in this input box is displayed as a confidential character.
The parameter is similar to "type = text.

<Form> your password: <input type = "password" name = "yourpwd" size = "20" maxlength = "15" value = "123456"> the password length is less than 15 </form>

• Type = file

What you need when uploading images in BBS and uploading attachments in EMAIL :)
Provides a platform for inputting file directories. The parameters include name and size.

<form> your file: <input type="file" name="yourfile" size="30"> </form> 

• Type = hidden

It is worth noting that a domain is often called a hidden domain: if a very important information needs to be submitted to the next page, but it cannot or cannot be expressed explicitly.
In a word, you cannot see where hidden is on the page. The most useful value is the value of hidden.

<Form name = "form1"> your hidden info here: <input type = "hidden" name = "yourhiddeninfo" value = "cnbruce.com"> </form> <script> alert ("the value of the hidden field is" + document. form1.yourhiddeninfo. value) </script>

• Type = button

Standard windows-style buttons, of course, to redirect the buttons to a page, you also need to add JavaScript code

<form name="form1"> your button: <input type="button" name="yourhiddeninfo" value="Go，Go，Go！" onclick="window.open('http://www.cnbruce.com')"> </form>

• Type = checkbox

Multi-choice box. It is common to select hobbies, personalities, and other information during registration. Parameters include name, value, and special parameters checked (which indicates the default value)
In fact, the most important thing is the value, which is the value submitted to the processing page. (Note: The name value can be different, but it is not recommended .)

<Form name = "form1"> a: <input type = "checkbox" name = "checkit" value = "a" checked> <br> B: <input type = "checkbox" name = "checkit" value = "B"> <br> c: <input type = "checkbox" name = "checkit" value = "c"> <br> </form> the name value can be different, but it is not recommended <br> <form name = "form1"> a: <input type = "checkbox" name = "checkit1" value = "a" checked> <br> B: <input type = "checkbox" name = "checkit2" value = "B"> <br> c: <input type = "checkbox" name = "checkit3" value = "c"> <br> </form>

• Type = radio

That is, the single-choice option appears in the page setting for multiple choices. Parameters also include name, value, and special parameter checked.
Different from checkbox, the name value must be the same; otherwise, you cannot select one more. Of course, the value is also submitted to the processing page.

<Form name = "form1"> a: <input type = "radio" name = "checkit" value = "a" checked> <br> B: <input type = "radio" name = "checkit" value = "B"> <br> c: <input type = "radio" name = "checkit" value = "c"> <br> </form> The following is an example of a different name value, you cannot select one of them. <br> <form name = "form1">: <input type = "radio" name = "checkit1" value = "a" checked> <br> B: <input type = "radio" name = "checkit2" value = "B"> <br> c: <input type = "radio" name = "checkit3" value = "c"> <br> </form>

• Type = image

One of them is more alternative. Let's take a look at the effect. It can be used as a submitted image.

<form name="form1" action="xxx.asp"> your Imgsubmit: <input type="image" src="../blog/images/face4.gif"> </form>

• Type = submit and type = reset

The buttons are "Submit" and "reset ".
The main function of submit is to submit all content in the Form to the action page for processing, and reset is to quickly clear all filled content.

HTML5 new Input type

 

• • Email
  • Url
  • Number
  • Range
  • Date pickers (date, month, week, time, datetime, datetime-local)
  • Search
  • Color

 

Email

The format of the email is automatically verified when the form is submitted. The Opera Browser must have the name attribute; otherwise, it does not work.

Url

When a form is submitted, the url field value is automatically verified.

Number

The input number can be limited. step is the interval between the previous number and the next number.

Effect:

　　

Range

The range type is used in the input field that should contain numeric values within a certain range.

The range type is displayed as a slide.

You can also set limits on accepted numbers. Attribute same as number

Effect:

Date Pickers

HTML5 has multiple new input types available for Date and Time Selection:

• • Date: Select day, month, and year
  • Month-select month and year
  • Week-select week and year
  • Time-Select time (hours and minutes)
  • Datetime-select the time, day, month, and year (UTC time)
  • Datetime-local-Select time, day, month, and year (local time)

Effect:

Search

The search type is used to search domains, such as site search or Google search. The search domain is displayed as a regular text domain.

<input id="search" type="url" list="searchlist" required /><datalist id="searchlist">                <option value="http://www.google.com" label="Google" />                <option value="http://www.yahoo.com" label="Yahoo" />                <option value="http://www.bing.com" label="Bing" /></datalist>

Here, datalist is equivalent to a drop-down list and can be selected. effect:

Color

Color Retrieval

Effect: