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.