[HTML5] 8. Form and input

8. Form and input

1. <Form> 

- HTML forms are used for collect user input

- The element defines an HTML form

2. <input>

- This element is the most important form element

- The element has many variations, depending on the type attribute

- text, email, password, radio, submit,number, range, color, time, week..

Attribute

1) value : This attribute specifies the initial value for an input field

2) readonly : It specifies that the input field is read only

<form action=""> First name:<br> <input type="text" name="firstname" value="John" readonly> <br> Last name:<br> <input type="text" name="lastname"> </form>  

3) disable : This disabled attribute specifies that the input field is disabled

4) Size : This attribute specifies the size for input field

5) maxlength :  The attribute specifies the maximum allowed length for the input field

6) autofocus : The autofocus attribute is a boolean attribute

First name:<input type="text" name="fname" autofocus>  

7) required : When present, it specifies that an input field must be filled out before submitting the form

Username: <input type="text" name="usrname" required>  

3. <fieldset> and <legend>

- The fieldset element groups related data in a form

- legend element defines a caption for the fieldset

<form action="action_page.php"> <fieldset> <legend>Personal information:</legend> First name:<br> <input type="text" name="firstname" value="Mickey"><br> Last name:<br> <input type="text" name="lastname" value="Mouse"><br><br> <input type="submit" value="Submit"> </fieldset> </form>

4. <label>

- The tag defines a label for an <input> element

- It provides a usability improvement for mouse users

- If the user clicks on the text within the <label> element, it toggles the control

<form action="demo_form.asp"> <label for="male">Male</label> <input type="radio" name="gender" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="gender" id="female" value="female"><br> <label for="other">Other</label> <input type="radio" name="gender" id="other" value="other"><br><br> <input type="submit" value="Submit"> </form>