HTML Form - Part 4

     I hope you read my HTML Form Part 3 article.

     Let's learn HTML input attributes.

• value = "" : specifies the value for an input field.

               Example code
                     <form action="#">
                                   First name:<br>
                                   <input type="text" name="firstname" value ="John">
                             </form>

               Output

• readonly : specifies that the input field is read only (cannot be changed).

               Example code
                     <form action="#">
                                  First name:<br>
                                  <input type="text" name="firstname" value ="John" readonly>
                             </form>

• disabled : specifies that the input field is disabled. It is not submitting any value to the form.

               Example code
                     <form action="#">
                                   First name:<br>
                                   <input type="text" name="firstname" disabled>
                             </form>

               Output

• size = " " : specifies the size (in characters) for the input field.According to the changes of the size, input field is changed. Do the changes of size and get the idea about that.

               Example code
                       <form action="#">
                               First name:<br>
                               <input type="text" name="firstname" size="10">
                         </form>

               Output

• maxlength = " " : specifies the maximum number of character for the input field.

               Example code
                       <form action="#">
                               First name:<br>
                               <input type="text" name="firstname" maxlength="10">
                         </form>

• min = " " : Specifies the minimum value for the input field.
• max = " " : Specifies the maximum value for the input field.

     It can use for number input and range input tags

               Example code
                     <form action="#" method="get">
                              Points:
                              <input type="range" name="points" min="0" max="10">
                              <input type="submit">
                       </form>

     Let's learn HTML5 input attributes.

• step = " " : Specifies the legal number intervals for an input field. It can be use for number input tags.

               Example code
                     <form action="#">
                             Quantity:
                             <input type="number" name="quantity" min="0" max="100" step="10"
                              value="30">
                             <input type="submit">
                       </form>

• pattern = " " : specifies a regular expression to check the input value against.

               Example code
                     <form action="#">
                             Telephone: 
                             <input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
                             <input type="submit">
                             <span>Format: 123-45-678</span>
                       </form>

• required : Specifies that an input field must filled before the submitting the form. It works with the type of text, search, url, tel, email, password, date pickers, number, checkbox, radio and file.

               Example code
                  <form action="#">
                               First name:<br>
                               <input type="text" name="firstname" required>
                         </form>

               Output

• placeholder : Specifies a hint that describes an expected value of the field. It works with the type of text, search, url, tel, email and password.

               Example code
                  <form action="#">
                               First name:<br>
                               <input type="text" name="firstname"  placeholder="First Name">
                               <input type="text" name="lastname"  placeholder="Last Name">
                         </form>


               Output

     I think now you have an idea of input attributes.

     See you soon with the HTML Form part 5 (HTML5 input attributes.)