HTML <input>: <input> tag is used to create different form controls such as Text fields, Password fields, Radio buttons, Check boxes etc.
Create Text Filed using <input>: we use type=”text” to create text box
| <!doctype html> <html> <body> Enter UserName : <input type=”text” name=”uname”/> </body> </html> |
Note: “Name” attribute is used to collect the input value of text box from script or from server.
Create Password field using <input>: we use type=”password” to create password field
| <!doctype html> <html> <body> Enter UserName : <input type=”text” name=”uname”/> <br/> Enter Password : <input type=”password” name=”pwd”/> </body> </html> |
Radio Button control:
- Radio buttons are used to select one option from multiple options.
- For example, Gender or Quiz etc….
Note: If we use one name for all the radio buttons, only one radio button can be selected.
| <html> <body> <input type=”radio” name=”gender”/> Male <br/> <input type=”radio” name=”gender”/> Female <br/> <input type=”radio” name=”gender”/> Other </body> </html> |
Email Field control:
- Email field is introduced int HTML 5
- It validates the text for correct email address
- You must use @ and . in this field
| <html> <body> Enter Name : <input type=”text” name=”name”/> <br/> Enter EMail : <input type=”email” name=”mail”/> <br/> </body> </html> |
Output: providing tool tip to enter the valid email address
Checkbox control:
- We can select more than one option at a time from the given options
- Examples: Languages known, Hobbies, Skills etc.
| <html> <body> Languages Known : <br/> <input type=”checkbox” name=”Telugu”/> Telugu<br/> <input type=”checkbox” name=”English”/> English<br/> <input type=”checkbox” name=”Hindi”/> Hindi<br/> </body> </html> |
Submit button: we use type=”submit” to create submit button. We can submit form data to JavaScript code as well as to server-side program.
| <html> <body> <form action=”login.jsp”> Enter Username : <input type=”text” name=”user”/> <br/> Enter Password : <input type=”password” name=”pwd”/> <br/> <input type=”submit” value=”LOGIN” /> </form> </body> </html> |
Drop Down Control:
- <select> element is used to create Drop Down list in HTML
- <option> tag is used to add values to drop down list.
| <html> <body> <form action=”login.php”> <label> Select Cars </label> <select> <option> BMW </option> <option> Volvo </option> <option> Audi </option> <option> Benz </option> </select> </form> </body> </html> |