HTML Advanced Tags (3) ———— application of the form

In HTML development, there are many types and quantities of tags, and it is impossible to say that each one is thoroughly researched. There are a lot of tags that can be controlled with CSS, and we don't need to waste time on them. So we just have to master the more commonly used tags in HTML development altogether.

First, write one of the simplest login forms.

Application of 
<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 that joins the relative path--
<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 of the execution of the program: (The picture is just a logo I arbitrarily intercepted, not advertising)

A simple form is finished, note that the <form> tag should be placed in <table>, and should be followed in addition to other field elements.

Next, add a radio box and a 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><tr><th> Radio Box </th><td><input type= "Radio" name= "Sex" checked>boy< Input type= "Radio" name= "Sex" >girl<input type= "Radio" name= "Sex" >secret</td></tr>
check box type= "checkbox", type= "Radio" of the Radio box.
However, a check box can be selected for all, or not to be selected. The radio box must have a selection, so add a default item and add a checked to it later. Also, the options in the radio box exist in a mutually exclusive way, and all of them are equal to the same in an array, that is, the name is the same, it can guarantee their mutual repulsion. Otherwise, you can't choose one.
This is the result of the execution:


There must be a list in the form, and here are a few more frequently used lists: normal list, drop-down list, multi-select list.
<th> drop-down list </th><td><select name= "list" ><option>--Please select--</option><option> 111111</option><option selected>222222</option><span style= "White-space:pre" ></span ><!--Default Options--><option>333333</option><option>444444</option><option> 555555</option><option>666666</option><option>777777</option><option> 888888</option></select></td></tr><tr><th> General List </th><td>< Select Name= "List1" size= "4" ><span style= "White-space:pre" ></span><!--drop-down length is 4--><option >--Please 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><tr><th> Multi-select list </th><td><select name= "List2" Multiple><span style= "White-space:pre" ></ span><!--Multiple is represented as a multi-select list--><option>--Please 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>


Don't confuse the internal and external relationships of labels.
Execution Result:
Finally, write a multi-line text field. Multi-line text fields are useful in places where there is a lot to describe.
<tr><th> multiline Text field </th><td><textarea cols= "rows=" name= "message" >typing your Message here</textarea></td></tr>
is very easy, a <testarea></textarea> done. The cols and rows properties are not much to say.
Look at the post-execution look:
When the number of words exceeds the size of the text box, you will actively join the scroll bar.
Well, often used is these, we learn together progress.


HTML Advanced Tags (3) ———— application of the form