First, create a form field set fieldset.
The fieldset element allows Web developers to combine topic-related forms.
In this example, each form is placed in an ordered list and a label is used to create a text box.
Label for referencing the id of the associated form element. We can also see from WebStorm syntax highlightingCreate a slider
Similarly, the for attribute is associated with the id attribute in input. The min attribute specifies the minimum value, the max attribute specifies the maximum value, and the value specifies the initial value.
Create value setting box
The type attribute sets the input attribute type, min sets the minimum value, max sets the maximum value, and step sets the step, of course. You can also enter it manually. The number entered directly is not subject to the set minimum and maximum values.
Create date Selector
Create email input box
Create URL input boxCreate color selector
The complete HTML code in the example is as follows:
1: <!DOCTYPE html>2:3:4: <title></title>5: <meta charset="utf-8">6:7:8: <body>9: <form method="post" action="index.html">10: <fieldset id="personal_information">11: <legend> Web form Control </legend>12: <ol>13: <li>14: <label for = "name"> name: </label>15: <input type="text" name="name" autofocus id="name">16: </li>17: <li>18: <input type = "submit" value = "submit">19: </li>20: <li>21: <label for = "priority_range"> adjust priority </label>22: <input type="range" min="0" max="100" name="priority" value="0" id="priority_range">23: </li>24: <li>25: <label for = "adjust_number"> adjust the value </label>26: <input type="number" name="estimated_hours" min="0" max="100" id="adjust_number" step="10">27: </li>28: <li>29: <label for = "date_select"> date selector </label>30: <input type="date" name="start_date" id="date_select" value="2013-07-09">31: </li>32: <li>33: <label for = "e_mail"> owner email address </label>34: <input type="email" name="email" id="e_mail">35: </li>36: <li>37: <label for = "url"> related URLs </label>38: <input type="url" name="url" id="url">39: </li>40: <li>41: <label for = "color_select"> color selector </label>42: <input type="color" name="color_selcet" id="color_select">43: </li>44:45: </ol>46: </fieldset>47:48:49:50: </form>51:52: </body>53:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
