Creating HTML forms

Start tag/End tag:- required/required
There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.

The HTML <form> tag is used to create an HTML form and it has following syntax:

<form action="Script URL" method="GET|POST">
form elements like input, textarea etc.
</form>
AttributesDescription
AcceptSpecifies a comma separated list of content types that a server processing the form correctly.
AutocompleteSet to TRUE (the default) , if you want the browser to automatically complete data in controls like text fields based on what the user has entered before.
DIRGives the direction of neutral text. Possible values : LTR : left-to-right text or table and RTL:right-to-left text
DISABLEDSet to TRUE if the form should be disabled
ENCTYPESets the Multipurpose Internet Mail Extension (MIME) type used to encode the name/value pairs when sent to the action URL. The default is “application/x-www-form-urlencoded”, but you can also use “multipart/form-data”, which is for elements.
METHODIndicates a method or protocol for sending data to the target action URL.
NAMEGives a name to the form so you can reference it in code.
TITLEHolds additional information (which might be displayed in tool tips )for the element.

HTML Form Controls

There are different types of form controls that you can use to collect data using HTML form:

  • Text Input Controls
  • Checkboxes Controls
  • Radio Box Controls
  • Select Box Controls
  • File Select boxes
  • Hidden Controls
  • Clickable Buttons
  • Submit and Reset Button

Text Input Controls

There are three types of text input used on forms:

  • Single-line text input controls – This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag.
  • Password input controls – This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTMl <input> tag.
  • Multi-line text input controls – This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.

Single-line text input controls

This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag.

Example code -1

Here is a basic example of a single-line text input used to take first name and last name:

<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name:  <input type="text" name="first_name" />
<br>
Last name:  <input type="text" name="last_name" />
</form>
</body>
</html>

Example output-1
First name:

Last name:

Attributes

Following is the list of attributes for <input> tag for creating text field.

AttributeDescription
typeIndicates the type of input control and for text input control it will be set to text.
nameUsed to give a name to the control which is sent to the server to be recognized and get the value.
valueThis can be used to provide an initial value inside the control.
sizeAllows to specify the width of the text-input control in terms of characters.
maxlengthAllows to specify the maximum number of characters a user can enter into the text box.

Password input controls

This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTML <input> tag but type attribute is set to password.

Example

Here is a basic example of a single-line password input used to take user password:

September 24, 2016 at 4:14 pm | HTML | No comment