HTML FORMS

                                             HTML FORMS:

      

In this chapter we are going to cover:

• Introduction to HTML Forms.

• HTML Form elements.

• HTML Form input types.

• HTML Form input attributes.

• HTML input attributes.

INTRODUCTION TO HTML FORM: 

                         An HTML form is used to collect user input and the user input is most often sent to a server for processing. Always note that “Forms are enclosed in the HTML <form> element”. Best example of collecting user input is logging in to any website. The below is the example of the collection of user input:

    

                                 First Name:     R.Hari

                                 Second Name: Narayanan 

          

                        In the above instance you saw the example of user input, Also Forms can be made up of standard graphical user interface elements such as: Text Fields, Checkboxes, Radio buttons, Submit buttons, etc.

HTML FORM ELEMENTS: 

                        Ok learners,  I believe that you got the right picture of what is HTML Form. Now we can discuss about HTML Form Elements and it’s uses:

                                          

•  <text>   - This tag creates a simple text box that allows input of a single line of text.

•  <email> -  This tag is a type of <text> that requires a sectionally validated email address.

•  <number> - This tag is a type of <text> that requires a number.

•  <password> -This tag is used for security purposes.

•  <radio> - This tag creates a radio button.

•  <file> - This tag is used to upload files.

•  <reset> -This tag is used to restore the user input values.

•  <submit> - This tag is used to send the user input to the server.

• <textarea> - This tag allows you to create multiple rows of data to be shown and entered.

•  <select> -  This tag displays a drop-down list that displays a list of items a user can select from.

           One of the most often used form element is  “ <input> element.” The below points are the example for input element:

                          <label for="firstname"> First name:</label>

                          <input type="text" id="firstname" name="firstname">

HTML FORMS: INPUT TYPES:

• <input type="button"> - This input type is used to create buttons in the form.

• <input type="checkbox"> - This input type is used to create a checkbox button in the form.

• <input type="color"> - This input type is used for input fields that should contain a color.

• <input type="date"> - This input type is used to display date in the form.

• <input type="datetime-local"> - This input type is used to display date and time in the form.

• <input type="email"> -  This input type is used to collect the user’s email address and it is sent to the server.

• <input type="file"> - This input type is used to upload the files in the form.

• <input type="image"> - This type is used to allow users to upload image.

• <input type="month"> - This input type allows the user to select month and year.

• <input type="number"> - This input type allows the users to enter numeric characters in the form.

• <input type="password"> - This input type is used to create a password field in the form.

• <input type="radio"> - This input type is used to create radio buttons in the form.

• <input type="reset"> - This input type is used to restore the user input values.

• <input type="search"> - This input type allows the users to search the content.

• <input type="submit"> - This input type is  used to create a submit button in the form to send the user response to the server.

• <input type="tel"> - This input type is used to collect the user’s telephone number.

• <input type="text"> - This input type is used to create a single line text input field in the form.

• <input type="time"> - This input type is used to display time to the user.

 

HTML FORMS: INPUT ATTRIBUTES:

• Value Attribute - The value attribute specifies the value of an <input> element.

• Readonly Attribute - users can only read the text, that is it cannot be modified.

• Disabled Attribute - It is used to disable the element.

• Size Attribute - It is used to change the font size.

• Maxlength Attribute - It is used to define the maximum number of characters.

• Min and Max Attributes - It is used to specify minimum and maximum values for an input field. In short: It is used to show the maximum and minimum number of the characters should be typed by the users.

• Multiple Attribute - It allows the user to type more than one value in the input field.

• Pattern Attribute - Pattern attribute works with text, date, search, url, tel, email, and password.

• Placeholder Attribute - It displays a short description about how the user should give input in the input field.

• Required Attribute -  it is used to specify that an input field must be filled out before submitting the form.

• Step Attribute - It is used to set legal number intervals.

• Autofocus Attribute - It sets the attention on that specific component when the page loads.

• Height and width Attributes - The height and width attributes are only relevant on <img> and image buttons.

• List Attribute - An element which contains predefined lists is known as list element.

• Autocomplete Attribute - Autocomplete allows the browser to predict the value and fills the word automatically in the input field.