Home > Developer > Web Develop
HTML advanced tag (3) ---- form application, html Tag form
In HTML development, there are many types and quantities of tags, and it is impossible to say that each of them is completely researched. There are many labels that can be controlled by CSS, so we do not need to waste time on them. Therefore, we only need to know the tags that are commonly used in HTML development.
First, write a simple logon form.
<Html><span style="white-space:pre"></span><tr><span style="white-space:pre"></span><td colspan="2" align="center"><span style="white-space:pre"></span><input type="submit" name="sub"><span style="white-space:pre"></span><input type="reset"><Span style = "white-space: pre"> </span> <input type = "image" src = "ucai.png"> <span style = "white-space: pre "> </span> <! -- This is a photo of adding relative paths --><span style="white-space:pre"></span></td><span style="white-space:pre"></span></tr><span style="white-space:pre"></span></form><span style="white-space:pre"></span></table><span style="white-space:pre"></span></body>This is the result after the program runs: (the image is just a logo that I randomly intercept, and it is never an advertisement)
A simple form is complete. Note that the <form> label should be placed in <table>. This method should also be followed when adding other field elements.
Next, add a single sequence and check box.
<Tr> <th> check box </th> <td> game <input type = "checkbox"> movie <input type = "checkbox"> travel <input type = "checkbox"> reading <input type = "checkbox"> writing <input type = "checkbox"> </td> </tr> <th> single shard </th> <td> <input type = "radio" name = "sex" checked> boy <input type = "radio" name = "sex"> girl <input type = "radio" name =" sex "> secret </td> </tr>Type = "checkbox" of the check box, type = "radio" of a single worker ".However, you can select all or none of the check boxes. A single shard must have a choice. Therefore, you must add a default entry, and then add a checked. In addition, the options in a single sequence are mutually exclusive. If they are put in the same array, that is, the names are the same, their mutual exclusion can be guaranteed. Otherwise, none of them can be selected.
This is the result after running:
There must be a list in the form. Next we will introduce several common lists: normal list, drop-down list, and multiple-choice list.
<Th> drop-down list </th> <td> <select name = "list"> <option> -- select -- </option> <option> 111111 </option> <option selected> 222222 </option> <span style = "white-space: pre "> </span> <! -- Default option --> <option> 333333 </option> <option> 444444 </option> <option> 555555 </option> <option> 666666 </option> <option> 777777 </option> <option> 888888 </option> </select> </td> </tr> <th> normal list </th> <td> <select name = "list1" size = "4"> <span style = "white-space: pre "> </span> <! -- The drop-down length is 4 --> <option> -- select -- </option> <option> 111111 </option> <option> 222222 </option> <option> 333333 </ option> <option> 444444 </option> <option> 555555 </option> <option> 666666 </option> <option> 777777 </option> <option> 888888 </ option> </select> </td> </tr> <th> multi-choice list </th> <td> <select name = "list2" multiple> <span style = "white-space: pre "> </span> <! -- Multiple indicates a multi-choice list --> <option> -- select -- </option> <option> 111111 </option> <option> 222222 </option> <option> 333333 </option> <option> 444444 </option> <option> 555555 </option> <option> 666666 </option> <option> 777777 </option> <option> 888888 </option> </select> </td> </tr>
Do not confuse the internal and external relationships of tags.
Running result:
Finally, write a multi-line text field. Multi-line text fields can be used in many areas that need to be described.
<Tr> <th> multi-line text field </th> <td> <textarea cols = "20" rows = "10" name = "message"> typing your message here </textarea> </td> </tr>It's easy. It's done with <testarea> </textarea>. The attributes of cols and rows will not be discussed much.Let's see what it looks like after running:
If the number of words exceeds the text box size, the scroll bar is automatically added.
Well, this is what is commonly used, so everyone can learn and make progress together.
Common form elements in HTML
Basic Introduction
This topic provides a comprehensive understanding of the basic form knowledge and advanced form application. I believe that you will be familiar with the form after reading this topic. Form overview forms play an important role in web pages and are mainly responsible for data collection. For example, you can collect visitors' names and e-mail addresses, surveys, and message books.
[Edit this section] form composition
A form has three basic components: Form tag, which includes the URL of the CGI program used to process form data and the method for submitting data to the server. Form field: contains the text box, password box, hidden field, multi-line text box, check box, single choice, drop-down selection box, and file upload box. Form button: includes the submit button, reset button, and general button. It is used to send data to the CGI script on the server or cancel the input, you can also use the form button to control the processing of other defined scripts. In order to take into account different web design tools, this article only describes the code design, not the specific operation method, the following is the form of HTML code design points:
Compile a form program in HTML<Html>
<Head> <Body>
<Form id = "form1" name = "form1" method = "post" onsubmit = "return check ();" action = "">
<P> User Name:
<Input type = "text" name = "textffield" id = "textffield"/>
</P>
<P> password:
<Input type = "password" name = "textfield2" id = "textffield2"/>
</P>
<P> confirm the password:
<Input type = "password" name = "textfield3" id = "textffield3"/>
</P>
<P> gender:
<Input type = "radio" name = "s" id = "s" value = "male" checked/>
Male
<Input type = "radio" name = "s" id = "s" value = ""/>
Female </p>
<P> personal interests:
<Input type = "checkbox" name = "c" id = "c" value = "Tourism" checked/>
Tourism
<Input type = "checkbox" name = "c" id = "c" value = "reading"/>
Reading </p>
<P> nationality:
<Select name = "select1" size = "1" id = "d">
<Option value = "Beijing" selected> Beijing </option>
<Option value = "Shanghai"> Shanghai </option>
<Option value = "Nanjing"> Nanjing </option>
<Option value = "Hangzhou"> Hangzhou </option>
<Option value = "Wuhan"> Wuhan </option>
</Sele ...... remaining full text>
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
