HTML Forms - Notes
HTML Forms - Notes
Topics Covered:
● What are HTML Forms and its purpose?
● What are the important attributes of form tag?
● What are input elements and their types?
● What are the important attributes of input elements?
● What are the important HTML elements included in Forms?
Topics in Detail:
HTML Forms:
● HTML Form is a part of a document, used to collect and store user information/data.
● The collected information is often sent to the server for processing.
● Form can contain the input elements like input text boxes, input text areas, labels,
checkboxes, radio buttons, submit button, etc…
● The form can contain different elements for collecting username, password, email id,
Date of birth, check box, radio buttons…
● HTML Forms can be created by using <form></form> tag.
● Code:
● Output:
1
HTML Form Attributes:
Attributes Purpose
method Defines the HTTP method to be used while submitting the form.
Method Description
post After submitting the form the values will not be visible in the
address bar.
target Defines the place where the response(received after submitting the form)
is to be displayed.
2
Input element in HTML Forms:
The <input> element is used to get input from the user. The <input> element can be displayed in
many ways depending on the type attribute. The default value of the type attribute is text.
<input type= “email”> The user input should contain an email address when submitting the
email validation will be done automatically.
<input type= “radio”> Displays radio button, to select one of multiple options.
<input type= “date”> The user field should contain a date, it does date validations
<input type= “number”> Numeric input field, the restriction can be made to accept only a specific
set of numbers.
<input type= “tel”> The user input should contain a telephone number.
class Name of the class Specifies one or more class names for the element. Used to
apply styles.
required When present specifies, the input field must be filled before submitting the form.
type text, number, email, Specifies the type of input that the user should enter before
button... submitting the form.
3
Input elements in Static LinkedIn page:
<textarea>
● The text area is a multiple-line text input field.
● The text area is often used in a form to collect user information like comments,
messages, reviews, etc…
● Example:
● The Attributes rows and cols are used to specify the size of the text area.
4
<label>
● Label defines what to be entered in the input fields.
● Labels are optional in forms.
● Example:
● The attribute for is used to define for which input field this label is used.
<button>
● The <button> tag defines the clickable button.
● The <button> tag also has the type and class attribute which is the same as the <input>
tag.
● Example:
● The attribute onclick defines what should happen on the click of a button.Usually it is
used to call JavaScript functions.