Comprehensive understanding of HTML Form elements

As shown below:

XML/HTML CodeCopy content to clipboard

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< title > Registration Form </ title >
</ head >
< body >
< form action = "DoFormAction.htm" >
< fieldset style = "width=800px" >
< legend > Please enter the following information and register </ legend >
< table cellspacing = "0px" cellpadding = "6px" border = "1px" bordercolor = "black" align = "center" width = "600px" >
< tr >
< td align = "right" > Username: </ td >
< td > < input type = "text" size = "20" style = "width:150px" /> </ td >
</ tr >
< tr >
< td align = "right" > Password: </ td >
< td > < input type = "password" size = "20" style = "width:150px" /> </ td >
</ tr >
< tr >
< td align = "right" > Confirm password: </ td >
< td > < input type = "password" size = "20" style = "width:150px" /> </ td >
</ tr >
< tr >
< td align = "right" > Gender: </ td >
< td >
< input type = "radio" checked = "checked" name = "sex1" value = "Male" /> Male
< input type = "radio" name = "sex1" value = "female" /> Female
</ td >
</ tr >
< tr >
< td align = "right" > Gender (click on text to select): </ td >
< td >
< fieldset style = "width:150px" >
< legend > Please select your gender </ legend >
< input type = "radio" checked = "checked" name = "sex2" value = "Male" id = "man" />
< label for = "man" > male </ label >
< input type = "radio" name = "sex2" value = "female" id = "woman" />
< label for = "woman" > female </ label >
</ fieldset >
</ td >
</ tr >
< tr >
< td align = "right" > City: </ td >
< td >
< select name = "city" >
< option value = "Beijing" > Beijing </ option >
< option value = "Shenzhen" > Shenzhen </ option >
< option value = "Shanghai" > Shanghai </ option >
< option value = "Nanchang" selected = "selected" > Nanchang </ option >
</ select >
</ td >
</ tr >
< tr >
< td align = "right" > City location: </ td >
< td >
< select name = "area" >
< optgroup label = "Beijing" >
< option value = "Chaoyang District" > Chaoyang District </ option >
< option value = "Haidian District" > Haidian District </ option >
< option value = "Other Districts" > Other Districts </ option >
</ optgroup >
< optgroup label = "Nanchang" >
< option value = "Donghu District" > Donghu District </ option >
< option value = "West Lake District" > West Lake District </ option >
< option value = "Qingshan Lake District" > Qingshan Lake District </ option >
</ optgroup >
</ select >
</ td >
</ tr >
< tr >
< td align = "right" > Friendship goal: </ td >
< td >
< select name = "target" size = "3" multiple = "multiple" >
< option value = "Peers" selected = "selected" > Peers </ option >
< option value = "Ordinary friends" > Ordinary friends </ option >
< option value = "lover" > lover </ option >
</ select >
</ td >
</ tr >
< tr >
< td align = "right" > Hobbies: </ td >
< td >
< input type = "checkbox" name = "love" value = "football" /> Football
< input type = "checkbox" name = "love" value = "Blue ball" /> Basketball
< input type = "checkbox" name = "love" value = "Ping Pong" /> Table tennis
</ td >
</ tr >
< tr >
< td align = "right" > Photo upload: </ td >
< td >
< input type = "file" name = "myPic" />
</ td >
</ tr >
< tr >
< td align = "right" > Self-introduction: </ td >
< td >
< textarea rows = "5" cols = "50" >
</ textarea >
</ td >
</ tr >
< tr >
< td align = "center" colspan = "2" >
< input type = "submit" value = "OK" />
< input type = "reset" value = "clear" />
< input type = "image" src = "../images/btnreg.png" onclick = "alert('hello')" /> <!--Demo image button (will submit data, similar to submit)
-->
</ td >
</ tr >
</ table >
</ fieldset >
</ form >
</ body >
</ html >

The above is all the content of the comprehensive understanding of HTML Form elements brought to you by the editor. I hope it will be helpful to everyone. Please support 123WORDPRESS.COM~

<<: Detailed explanation of soft links and hard links in Linux

>>: Vue button permission control introduction