Table of Contents
HTML Form
- An HTML form is a section of a document that contains controls such as text fields, numeric fields, password fields, Date & Time fields, check boxes, radio buttons, submit button, reset button, etc.
- It helps the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, date of birth, time, gender, selection menu etc.
- HTML forms are used to get the data of the user to save or store it in database
- For example: If a user want to buy some products on internet(from online sites), the user must fill the form such as name, shipping address and credit/debit card details so that product can be sent to the given address.
HTML Form Syntax
<form action="URL" method="get or post">
//input controls e.g. textfield, textarea, radiobutton, button
</form>- Attributes of <Form>
- Name: The name of the form
- Action: The URL that processes the form submission
- Method: The HTTP method to submit the form with two possible values:
- post: The POST method; form data sent as the request body.
- get: The GET method; form data appended to the action URL with a ? separator.
<input> element
- The HTML <input> element is basic form element.
- It is used to create the fields which takes input from user.
- There are different kinds of form fields to get different types of value from user
- Example: text field
<body>
<form>
Enter your name <br>
<input type="text" name="username" value=”HJDOSHI”>
</form>
</body>- In above example, we have used textfield control.
TextField Control
- The type=”text” attribute of input tag creates textfield control also known as single line textfield control.
- The name attribute is optional, but it is required for the server side component such as JSP, ASP, PHP etc.
<form>
First Name: <input type="text" name="firstname"> <br>
Last Name: <input type="text" name="lastname"> <br>
</form>- Value: It is a string that contains the current value of the text entered into the text field.
- Maxlength: It indicates maximum number of characters the user can enter into the text field.
- Minlength: It indicates minimum number of characters the user can enter into the text field.
- Size: The size attribute is a numeric value indicating how many characters wide the input field should be.
- The value must be a number greater than zero, and the default value is 20.
- Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font
- Placeholder: It is a string that provides a brief hint to the user as to what kind of information is expected in the field.
- Example: State: <input type=”text” name=”state” placeholder=”Gujarat, Maharashtra, Rajasthan…”>
- Making input required:
- You can use the required attribute as an easy way of making entering a value required before form submission is allowed
<form>
Enter Your Name:<br>
<input type="text" name="txtname" required>
<input type=submit>
</form>- Disabled: It prevents the value of the element to be sent when the form is submitted.
<form>
Enter Your Name:<br>
<input type="text" name="txtname" disabled>
<input type=submit>
</form>- Readonly: A Boolean attribute which, if present, indicates that the user should not be able to edit the value of the input
- <input type=”text” name=”txtname” value=”HJDOSHI” readonly>
- Tabindex: It is a global attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation. It has integer value.
<input type=”text” tabindex=2><br>
<input type=”text” tabindex=1><br>
<input type=”text” tabindex=4><br>
<input type=”text” tabindex=3><br>- Accesskey: It is a short cut to access any control with the use of “alt” + other alphabet key.
- <input type=”text” accesskey=”a”><br>
- Press alt+a to directly move to the textbox control.
- Title: It is a global attribute valid for all elements, including all input types, containing a text representing advisory information related to the element it belongs to.
- Name : <input type=”text” title=”Write Your Name Here”><br>
- Autofocus: It instructs the browser to set the focus to this control when the document has finished loading
- Name : <input type=”text” name=”txt1” autofocus><br>
Password Field Control
- <input> elements of type password provide a way for the user to securely enter a password.
- The password is not visible to the user in password field control.
<form>
Enter Password:
<input type="password" name="password">
</form>- Value: The value attribute contains a string whose value is the current contents of the text editing control being used to enter the password.
- Maxlength: The maximum number of characters the user can enter into the password field
- Minlength: The minimum number of characters the user can enter into the password field
- Size: The size attribute is a numeric value indicating how many characters wide the input field should be.
- Placeholder: It is a string that provides a brief hint to the user as to what kind of information is expected in the field.
- Making input required:
- You can use the required attribute as an easy way of making entering a value required (for password) before form submission is allowed.
- Readonly: A Boolean attribute which, if present, indicates that the user should not be able to edit the value of the input.
Number Control
- <input> elements of type number are used to let the user enter a number.
- They include built-in validation to reject non-numerical entries.
- <input type=”number”>
- Value: A Number representing the value of the number entered into the input
- You can set a default value for the input by including a number inside the value attribute
- <input type=number value=”10”>
- Max: The maximum value to accept for this input
- Min: The minimum value to accept for this input
- Placeholder: It is a string that provides a brief hint to the user as to what kind of information is expected in the field.
- Step: By default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. You can change this by providing a step attribute, which takes as its value a number specifying the step amount.
- <input type=”number” step=”10” placeholder=”Multiple of 10”>
- You can also allow decimals here
- <input type=number step=”0.01″>
Radio Button Control
- The radio button is used to select one option from multiple options.
- It is used for selection of gender, quiz questions etc.
- Use one name for all the radio buttons, to select one radio button at a time.
<form>
Gender:
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
</form>- Value: It is a string containing the radio button’s value. It is used to identify which radio button in a group is selected.
- Checked: It indicates that this radio button is the default selected one in the group.
Select Gender:
<input type="radio" name="contact" value="Female" checked >Female<br>
<input type="radio" name="contact" value="Male">Male- Required: When this boolean attribute is present in any of the radio buttons of a particular group, the browser won’t allow the submission of the form until one of the buttons in the group has been checked.
Checkbox Control
- The checkbox control is used to check multiple options from given check boxes.
- These are similar to radio button except it can choose multiple options at a time and radio button can select one button at a time, and its display.
<body>
<form>
Subject of Interest: <br>
<input type="checkbox" name="html" value="HTML">
HTML <br>
<input type="checkbox" name="c" value="Language C">
Language C<br>
<input type="checkbox" name="cf" value="Computer Fundamentals">
Computer Fundamentals<br>
<input type="checkbox" name="cs" value="Communication Skills">
Communication Skills
</form>
</body>- Value: It is a string representing the value of the checkbox.
- This is not displayed on the client-side, but on the server this is the value given to the data submitted with the checkbox’s name.
- Checked: It indicates whether or not this checkbox is checked by default, when the page loads.
<form>
Select Your Subjects :
<input type="checkbox" name="s1" value="HTML" checked>HTML
<input type="checkbox" name="s2" value="CSS" checked>CSS
</form>- Required: When this boolean attribute is present in any of the check boxes of a particular group, the browser won’t allow the submission of the form until one of the radio buttons in the group has been checked.
Button Control
- <input> elements of type button are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the click event).
- Value: It contains a string that is used as the button’s label.
- <input type=”button” value=”Click Me”>
Submit button Control
- HTML <input type=”submit”> are used to add a submit button on web page.
- When user clicks on submit button, then form get submit to the server.
Syntax: <input type=”submit” value=”submit form”>
The type = “submit”, specifying that it is a submit button & the value attribute can be anything which we write on button.
<form>
Enter name<br>
<input type="text" name="name"><br>
Enter Password<br>
<input type="Password" name="pass"><br>
<input type="submit" value="submit form">
</form>Reset Button Control
- <input> elements of type reset are rendered as buttons that resets all of the inputs in the form to their initial values.
<input type=”reset” value=”Reset the form”>
Value: It contains a string that is used as the button’s label.
Select Control
The <select> HTML element represents a control that provides a menu of options.
<select name="subjects">
<option value="">--Please choose an option--</option>
<option value="language c">Language C</option>
<option value="cf">Computer Fundamentals</option>
<option value="html">HTML & Networking</option>
</select>Name: It is used to represent the name of the associated data point submitted to the server.
<Option>: Each menu option is defined by an <option> element nested inside the <select>.
Value: Each <option> element should have a value attribute containing the data value to submit to the server when that option is selected.
Selected: You can include a selected attribute on an <option> element to make it selected by default when the page first loads.
Multiple: It is used to specify whether multiple options can be selected. It is written inside <select>
Size: It is used to specify how many options should be shown at once. It is written inside <select>.
<textarea> Control
- The <textarea> tag in HTML is used to insert multiple-line text in a form.
- It allows users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
- The size of <textarea> can be specify either using “rows” or “cols” attribute or by CSS.
<body>
<form>
Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>
</body>- rows and cols attributes to allow you to specify an exact size for the <textarea> to take.
- The <textarea> element also accepts several attributes common to form <input>s, such as autocomplete, autofocus, disabled, placeholder, readonly, and required.
- Minlength & maxlength attributes restricts the user to enter up to certain number of characters.
<map> Control
- It is used with <area> elements to define an image map which is a clickable link area.
Name: The name attribute gives the map a name so that it can be referenced.
<map name="primary">
<area shape="circle" coords="75,75,75" href="left.html">
<area shape="circle" coords="275,75,75" href="right.html">
</map>
<img usemap="#primary" src="d:/image1.png" alt="350 x 150 pic"><area> Control
- It defines an area inside an image map that has predefined clickable areas.
- An image map allows geometric areas on an image to be associated with hypertext link.
- This element is used only within a <map> element.
Alt: A text string alternative to display on browsers that do not display images.
Shape: The shape of the associated hot spot.
The specifications for HTML define the values rect, which defines a rectangular region; circle, which defines a circular region; poly, which defines a polygon; and default, which indicates the entire region beyond any defined shapes.
Coords: The coords attribute details the coordinates of the shape attribute in size, shape, and placement of an <area>.
rect: the value is x1,y1,x2,y2.
Value specifies the coordinates of the top-left and bottom-right corner of the rectangle.
For example: <area shape=”rect” coords=”0,0,253,27″ href=”page.html”>
The coords in the above example specify: 0,0 as the top-left corner and 253,27 as the bottom-right corner of the rectangle.
circle: The value is x, y, radius.
Value specifies the coordinates of the circle center and the radius.
For example: <area shape=”circle” coords=”130,136,60″ href=”page.html”>
poly: The value is x1,y1,x2,y2,..,xn,yn.
Value specifies the coordinates of the edges of the polygon.
If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon
default: defines the entire region
href: The hyperlink target for the area. Its value is a valid URL.