Downloaded 15 times
Html forms
- 1.
- 2. HTML FORMS • HTMLForms are required when you want to collect some data from the site visitor or user. • For example during user registration you would like to collect information such as name,email address, credit card, etc. • An HTML form contains form elements. • Form elements are different types of input elements, like text fields, checkboxes, radio buttons,drop-down menus,textarea field, submit buttons,and more.
- 3. HTML FORMS • Input<input>Elements - Is used to define an input field where the user may enter information on the form • <form>Elements -Defines an HTML form for user input • There are Two attributes 1. Type – determines what kind of input field 2. Name – assign a name to the given field so that you have a reference for later use
- 4. HTML Form Controls •There are different types of form controls that you can use to collect data using HTML form: – Text Input Controls – Password Input Control – Radio Box Controls – Checkboxes Control – Submit and Reset Button – Select Box Controls – Button Controls
- 5. HTML Form Controls 1)TEXT INPUT- <input type=“text”>defines a one-line input field for text input. Example:<form> First name:<input type=“text” name=“firstname”><br> Last name:<input type=“text” name=“lastname”><br> </form> • OUTPUT:
- 6. HTML Form Controls 2)Input type PASSWORD- <input type="password"> defines a password field. Example:<form> Password:<input type=password name=“pwd”> </form> • OUTPUT:
- 7. HTML Form Controls 3)RADIO BUTTON- <input type="radio"> defines a radio button. Example:<form> <input type=radio name=“sex” value=“Male”>Male<br> <input type=radio name=“sex” value=“Female”>Female<br> </form> • OUTPUT:
- 8. HTML Form Controls 4)CHECKBOX- <input type="checkbox"> defines a checkbox. Example:<form> <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle2" value="Car"> I have a car <br> </form> • OUTPUT:
- 9. HTML Form Controls 5)Input Type SUBMIT- <input type="submit"> defines a button for submitting form data to a form- handler. Example:<form> First name:<input type="text" name="firstname"><br> Last name:<input type="text" name="lastname"><br> <input type="submit" value="Submit"> </form> • OUTPUT:
- 10. HTML Form Controls 6)Input Type RESET- <input type="reset"> defines a reset button that will reset all form values to their default values. Example:<form> First name:<input type="text" name="firstname"><br> Last name:<input type="text" name="lastname"><br> <input type="submit" value="Submit"> <input type="reset"> </form> • OUTPUT:
- 11. HTML Form Controls 8)SELECT BOX CONTROL- The <select> element defines a drop-down list. Example:<form> OUTPUT: <select name="cars"> <option value="Honda">Honda</option> <option value="Hyundai">Hyundai</option> <option value="fiat">Fiat</option> <option value="Maruti Suzuki">Maruti Suzuki</option> </select><br> <input type="submit"> </form>
- 12. HTML Form Controls 7)Input Type BUTTON- <input type="button"> defines a button. Example:<form> First name:<input type="text" name="firstname"><br> Last name:<input type="text" name="lastname"><br> <input type="submit" value="Submit"> <input type="reset"> <input type=button value="CLICK HERE"> </form> • OUTPUT:
- 13. <html> <head> <title>html forms</title> <body> <form> First name:<inputtype="text" name="firstname"><br> Lastname:<input type="text" name="lastname"><br> Your password:<input type="password" name="pwd"><br> <input type=radio name=“sex” value=a>Male <input type=radio name=“sex” value=b>Female<br> <input type="checkbox" name=Employed value=x>Employed <input type="checkbox" name=Unemployed value=y>Unemployed OUTPUT <select name="cars"> <option value="Honda">Honda</option> <option value="Hyundai">Hyundai</option> <option value="fiat">Fiat</option> <option value="Maruti Suzuki">Maruti Suzuki</option> </select><br> <input type="submit" value="Submit"> <input type="reset"> <input type=button value="CLICK HERE"> </form> </body> </head> </html>
- 14.