HTML5 Daily Training Input New 5 additional types of 1 label applications

Today we present the last 5 types of input in HTML5, namely: Number,range,search,tel and Color

Note: This type of input works best in opera10+ and Chrome does not work very well, and the appearance depends on the browser



1. Type of number:

2. <form>
3. <input id= "W3cfuns_date" name= "w3cfuns.com" type= "number"/>
4. <input type= "Submit" value= "Submission"/>
5. </form>

Copy Code

This input box is a text box that is specifically used to enter numbers, and when submitted, verifies that the content is a number, with four attributes: Min, Max, step, and value.
min: minimum value for this input box
Max: maximum value for this input box
Step: When you click the up and down arrows value to jump a few times
Value: represents the default value for this input box


Run Now:

<textarea id="run_BTY" name="run_BTY"></textarea>Run code copy code to save code hints: You can modify some of the code before running!Power by W3cfuns.com

2. Range Type:

2. <form>
3. <input id= "W3cfuns_range" name= "w3cfuns.com" type= "range"/>
4. <input type= "Submit" value= "Submission"/>
5. </form>

Copy Code

This input box is a text box that allows you to enter only a certain range of values, and it also has four properties: Min, Max, step, and value, the default value range is 0-100.
min: minimum value for this input box
Max: maximum value for this input box
Step: When you click the up and down arrows value to jump a few times
Value: represents the default value for this input box


Run Now:

<textarea id="run_B2M" name="run_B2M"></textarea>Run code copy code to save code hints: You can modify some of the code before running!Power by W3cfuns.com

3. Search Type:

2. <form>
3. <input id= "W3cfuns_search" name= "w3cfuns.com" type= "Search"/>
4. <input type= "Submit" value= "Submission"/>
5. </form>

Copy Code

The input element of the search type is a text box that is specifically used to enter search keywords, and the search type differs from the text type only in appearance, and the appearance can be defined using CSS.

1. Input[type= "Search"]{-webkit-appearance:textfield;}

Copy Code

Run Now:

<textarea id="run_UM5" name="run_UM5"></textarea>Run code copy code to save code hints: You can modify some of the code before running!Power by W3cfuns.com

4. Tel Type:

2. <form>
3. <input id= "W3cfuns_tel" name= "w3cfuns.com" type= "Tel"/>
4. <input type= "Submit" value= "Submission"/>
5. </form>

Copy Code

The Tel element is designed to enter a special text box for the phone number, he does not have a special validation rule, does not force the input number, because many phones usually carry other characters, such as: 010-88696811, but developers can use the pattern attribute to make the input content, usually regular expression.

Run Now:

<textarea id="run_Scc" name="run_Scc"></textarea>Run code copy code to save code hints: You can modify some of the code before running!Power by W3cfuns.com

5. Color type:

2. <form>
3. <input id= "W3cfuns_color" name= "w3cfuns.com" type= "Color"/>
4. <input type= "Submit" value= "Submission"/>
5. </form>

Copy Code

The input element of the color type is used to take a color, which provides a color picker.

Run Now:

<textarea id="run_C7i" name="run_C7i"></textarea>Run code copy code to save code hints: You can modify some of the code before running!Power by W3cfuns.com

6. Output Label:

2. <form>
3. <input id= "W3cfuns_range" name= "w3cfuns.com" type= "range"/>
4. <output id= "W3cfuns_output" name= "w3cfuns.com" type= "Output" value= "W3cfuns_range.value" >50</output>
5. <input type= "Submit" value= "Submission"/>
6. </form>

Copy Code

The input element of the range type is used to define different types of output, such as the result of a calculation or the output of a script, which must belong to a form. In other words, you must write it inside the form, or add a form to the property.

In this example, the element is bound to a range element, and the value is displayed when you drag the slider bar of the range element.
Most browsers do not support it very well at the moment!

Run Now:

<textarea id="run_k4j" style="margin: 2px; height: 34px; width: 281px;" name="run_k4j"></textarea>Run code copy code to save code hints: You can modify some of the code before running!