The most common thing that used in HTML to get data from users is form. Form is a container tag the tags related to get the data is in between this tag. There are different types of tags to get data from user through tags. These tags are called controls or widgets. There are different types of controls like textbox, passwords, radio buttons, checkboxes, text area, menu etc. will be the controls of form. Different controls helps to collect data through different options. These controls are used to optimize the space and also collect the data from the user in the easy manner. Based on different text controls we are going to collect the data.
Form tag and it’s attributes:-
<form> tag is container tag which is used to combine the data and send to the server. Form has different attributes to send the data to server. When the user click on the submit button the data will be sent to server through specific URL by using an attribute called action. The method attribute of <form> specifies one of the two techniques, get or post. Used to pass the form data to the server, get is the default. If no method attribute is used in form tag get attribute is used. How the data sent to the server and store the data in to the database will be posted soon on our blog.
To know about previous classes please visit our blog posts. Click here for Full details about tables.
Label tag:-
It is the important tag used to display the names in the form tag. We have many options to display the content into the browser. But in forms we are using label tag for display the content. We are using the label tag for the display the user to enter what type of data to the textbox or any other input tag. It gives the special look and informative to the user.
If the textbox and its label are encapsulated together. There are several other benefits of this approach to labeling controls. Browser often render the text content of a label element differently to make it stand out. If the text content of a label element is selected, the cursor is implicitly moved to control. This is an aid to new web users.
<label> text </label>
Input tag:-
Many of the commonly used controls are specified within the inline tag <input> which is used for text, passwords, checkboxes, radio buttons and the action buttons like reset, submit, and plain. The one attribute of <input> tag is required for all of the controls is type, which specifies the particular kind of control. The control’s kind is its type name, such as checkbox. All of the controls required name attribute except Reset and submit, which becomes the name of the value of the control within the form data. The controls for checkboxes and radio buttons require value attributes, which initializes the value of the control.
Type=text:
A text control, which we usually refer to as a text box, creates a horizontal box into which the user can type a line of text. Textboxes are often used together information from the user, such as user name or address. The default size of a textbox is often 20 characters. But in real time address and some data has many lines also. Then it is problem to input all the data. That is the reason we have an attribute called size and maxlength will be used to specify the number of character should taken by the textbox.
For example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="">
<input type="text" name="Name" size=”15” maxlength="10" />
</body>
</html>
In the above example we are using the both size and maxlength attributes. Size attribute increase the size of the textbox and maxlength gives the number of characters should be taken from the textbox.
Type=password:
If the contents of a textbox should not be displayed when it is entered by the user, a password control can be used. In the case, regardless of what characters are typed into a password control, only bullets or dots are displayed by the browser.
For example:
<input type=”password” name=”mypassword” size=”10” maxlength=”10” />
For all examples of input tag I just used the line only for the length of the article.
There is no restriction on the characters that can be typed into a textbox. So, the string must be anything like “@1w2#;’”. Therefore the entered contents of textboxes nearly always must be validated. The content about validation will be updated in next articles.
Type=number:
If we want to take phone number or pincode number of a place from user then we are using the number value. When we want to use only numbers then we are going to use the type=”number”.
For example:
<input type=”number” name=”phno” />
In this example we just use type and name attributes only because maxlength attribute not working in this article. For validations or limit for the numbers we are using validations.
Checkboxes and radio controls are used to collect multiple-choice input from the user. A checkbox control is a single button that is either on or off (checked or not). If the checkbox button is on, the value associated with the name of the button is the string assigned to its value attribute.
The attribute checked, which is assigned the value is checked, specifies that the checkbox button is initially on. Whenever user click on the checkbox it will unchecked.
Example:-
<input type="checkbox" name="hobbies" checked="checked" / > <label> Playing </label>
<label><input type="checkbox" name="hobbies" / > Watching tv</label>
<label><input type="checkbox" name="hobbies" / > music </label>
In above example there is no difference for label tag where it is started. In first line I’m writing the label tag at closing of input tag and in second and third line label tag is used starting of line. Inside the label tag we are used the input tag. There is no difference for the two.
The output of all HTML output
 |
| Form tags |
This is the first part of the form tags. In next article we are discuss about remaining tags. i.e. radio buttons, dropdown lists, range, and buttons.
If you have any doubts in this article let me know in the comment section below. If you l
ike our content please share to your friends
