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>
|Accept||Specifies a comma separated list of content types that a server processing the form correctly.|
|Autocomplete||Set 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.|
|DIR||Gives the direction of neutral text. Possible values : LTR : left-to-right text or table and RTL:right-to-left text|
|DISABLED||Set to TRUE if the form should be disabled|
|ENCTYPE||Sets 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.|
|METHOD||Indicates a method or protocol for sending data to the target action URL.|
|NAME||Gives a name to the form so you can reference it in code.|
|TITLE||Holds 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>
Following is the list of attributes for <input> tag for creating text field.
|type||Indicates the type of input control and for text input control it will be set to text.|
|name||Used to give a name to the control which is sent to the server to be recognized and get the value.|
|value||This can be used to provide an initial value inside the control.|
|size||Allows to specify the width of the text-input control in terms of characters.|
|maxlength||Allows 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.
Here is a basic example of a single-line password input used to take user password:
September 24, 2016 at 4:14 pm | HTML | 1 comment