Home > Developer > Web Develop
The basic format of an HTML form element is ( must be included in the form label )
Can be broadly divided into text classes , button classes , check boxes and Radio boxes , file selection of several categories
1. Text class
text box label <input type = "Text"/>, Property size text box width, maxlength can enter the maximum byte length, readonly= "readonly" text is read-only, cannot be modified
The Password box label <input type = "Password"/>, and the page appears as a small black dot
Hide Tags (hidden fields)<input type= "hidden"/>, no effect on page display, often used to save page state values
text field label <textarea></textarea>, property rows and cols (column), which shows the user entering multiple data text, the original output of the data in the text field (preserving the original format) , you can use the Value property to get the data in the text field.
2. Button class
submit button Label <input type= "Submit"/>
reset button Label <input type= "reset"/>, restores the original state of the page when it was just loaded.
button Label <input type= "button" onclick= ""/> you can add a click event for the click button.
Image label <input type= "image" Src= "URL"/> Click on the image to submit the location coordinates of the click.
3. check box, radio box and file upload
check box label <input type= "checkbox" id= ""/><label for= "id" > Text </label>, multiple small squares grouped together, the user makes multiple selections, Common Properties Checked= "Checked" is selected by default, the text is wrapped using a label label, and the ID of the specified checkbox is associated with the For property
Radio button <input type= "Radio"/> when used, it should be noted that the radio boxes are always grouped together, requiring the same name property , with the property checked= "Checked" selected by default. Setting the Value property makes it easy to get the selected data.
File Selection label <input type= "file"/>,form enctype must be set to Multipart/form-data, Method property is post
1 <HTML> 2 <Head>3 <title></title>4 <styletype= "Text/css">5 </style>6 <Scripttype= "Text/javascript"> 7 </Script>8 </Head>9 <Body> Ten <form> OneCheck:<BR/> A <inputtype= "checkbox"ID= "Item1" /><label for= "Item1">Option One</label> - <inputtype= "checkbox"ID= "Item2" /><label for= "Item2">Option two</label> - <inputtype= "checkbox"ID= "Item3" /><label for= "Item3">Option three</label> the - <BR/>your gender is: - <inputtype= "Radio"name= "Sex"value= "M"checked= "Checked"/>male - <inputtype= "Radio"name= "Sex"value= "F" />female + </form> - </Body> + </HTML>
Run results
HTML Learning Notes (10) Form elements
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
