Forms and Form Elements in HTML

Forms and Form Elements in HTML

Forms are used to create interactive websites. The visitors can send feedback emails, comments and suggestions by using these forms like that you can see in the post end a form for you to add your comment. The form is an easier way for the user to communicate with the webmaster or the owner of the website.

Uses of forms

Some uses of forms are as follows:

  • Educational Sites
    • The form is used to collect names, addresses, emails and other information by the educational websites.
  • Online Orders
    • Many websites use forms to get online orders from visitors. The user can send the order by entering information in the forms
  • Feedback
    • Many websites use the form to get feedback from the users. The feedback of the visitors is an important source for improving the services or products of a company.
  • Interface for Chatting
    • Many users use forms for chatting with other people on the internet. They have to fill different forms to participate in the chat. A form consists of different form elements. Each type of element is used for different purposes. Some important form element is as follows:
      • Textbox
      • List Box
      • Radio Button
      • Checkbox
      • Button
      • Text Area
      • Password Field

<form> tag

<form> tag is used to create a form on a web page. All form elements are inserted within <form> and </form> tags. <form> tag indicates the start of form and </form> indicates the end of the form. A web page may contain many forms.

Attributes:

AttributesDescription
NameIt specifies the name of the form
MethodIt specifies how the form data is sent to the server. The possible value is as follows:
GET: It sends the data as part of the URL. The data included with the URL can be seen by other people. It is also remembered by the browser. It is the default value.
POST: it sends the data encoded in the HTTP data stream. It is mostly used to send a large amount of data. The data is not displayed in the URL. Therefore, it is more secure.
ActionIt specifies where the form data will be submitted. It is normally sent to a script on the server or submitted as an email.

Example

<!DOCTYPE html>
<html>
<head>
	<title>Form in HTML</title>
</head>
<body>
	<form name="form1" method="post" action="mailto:info@wuschools.com">
		<input type="text" name="name" placeholder="name">
		<input type="number" name="phone" placeholder="Phone Number">
		<input type="mail" name="mail" placeholder="Your Mail">
		<input type="submit" name="submit" value="Send">
	</form>

</body>
</html>

Output

forms

Forms Elements

Most of the form elements are inserted in a form by using <input> tag. The type attribute of <input> tag indicated the type of form elements to be inserted in the form. The general syntax of using this tag is as follows:

<input type=”form_element”>



In the above example, form_element is the type of element to be inserted in the form.

Text Field

Text fields are used to get input from the user in the form of letters, numbers, etc.

Attributes

AttributesDescription
NameIt specifies the name of the text field
ValueIt refers to the contents of the text field
Default valueIt indicates the default value of the text field
Max lengthIt specifies the maximum number of characters that can be entered in the text field

Example

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

Password Field

Password fields are used to input password in the form. Each character inserted in this field appears as *. The attributes of the password field are the same as a text field.

Example

<input type="password" name="password">

Radio Button

Radio buttons are used when the user has to choose one option from multiple choices.

Attributes

Some important attributes of radio button are as follows:

AttributesDescription
NameIt specifies the name of the radio button
Value It refers to the value attached with the radio button
CheckedIt specifies that the radio button is selected by default

Example

<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female">Female

All radio buttons with the same name become a group. The user can select one radio button from the group. If the names are different the user can select all radio buttons ar the same time.

Checkbox Field

Checkboxes are used to provide many options to the user. The user can choose one or more options from variable choices. The attributes of the checkbox are the same as a radio button.

Example

<input type="checkbox" name="travel">Traveling
<input type="checkbox" name="sport">Sports
<input type="checkbox" name="chatting">Chatting

Select Field

The select field is used to provide a predefined list of items to the user. The user can choose one or more than one option from the list depending on the type of list. <select> tag is used to create a list <option> tag is used to create an item in the list.

Example

<select name="city">
	<option value="isl" selected>islamabad<option>
	<option value="lhr">Lahore<option>
	<option value="grw">Gujranwala<option>
	<option value="krci">Karachi<option>
</select>

Text Area Field

The text area is similar to text box but it may consist of multiple rows. It is used to get lengthy input from the user like comments and suggestions etc. <textarea> tag is used to create text area in a form.

Attributes

AttributeDescription
NameIt specifies the name of the text area
ValueIt specifies the contents of the text area
Default valueIt specifies the default value of the text area
Rows It specifies the number of rows in the text area
ColsIt specifies the number of columns in the text area

Example

<textarea cols="25" row="20" placeholder="Write your Message"><textarea>



Button

Button used in forms to process the form data. <button> tag is used to create a button in HTML page.

Attributes

Some important attributes of this tag are as follows

AttributeDescription
NAMEIt specifies the name of the button
VALUEIt specifies the caption of the button

Example

<input type="button" value="Next">

File Upload Field

The file upload field is used to get files for the user in a form. The visitors can select a file from the disk using the field. <file> tag is used to create a file upload field.

Attributes

Some important attributes of this tag are as follows:

AttributeDescription
NameIt specifies the name of the button
ValueIt specifies the file name and path of the selected file

Example

<input type="file" name="f">

Submit button

Submit button is the predefined button. It is used to process the form data. When the user clicks this button, it processes the form data according to the value specifies in the action attribute of the form. The attributes of this tag are similar to the attributes of the <button> tag.

Example

<input type="submit">

Reset Button

The reset button is a predefined button. It is used to reset the form. When the user clicks the button clear all data entered by the user in different from elements. The attributes of the tag are similar to the attribute of the <button> tag.

Example

<input type="reset">

Reference

If you want to learn more about HTML or image tag then visit the official website: Visit

Visit the HTML tutorial list. And make strong your HTML concept. Click here. wuschools.com is always written about the HTML concept for the HTML lover. Ang writes about how HTML makes your life easy if you are a web site developer. We help you to continue your learning.

Leave a Reply

Close Menu