Q2. six elements or components used in form tag of HTML with their attributes?
Q1. Define the forms of HTML with example? Why we use form tag of HTML?
Ans. Forms are used to collect data inputted by a user. They can be used as an interface for a web application, for example, or to send data across the web.Form Tag : Form defines the form and within this tag, if you are using a form for a user to submit information, an action attribute is needed to tell the form where its contents will be sent to.
HTML forms are used to collect user input.
Syntax :
<form action="processingscript.php" name= "test" method="post">
</form>
In the above code, the action tells the form which script will process the information gathered. The name attribute gives your form a name. And, the method attribute can either be "get" or "post"
The forms tags include following basic tags used in HTML form.
1. Input Tag:
The input tag allows the user of your website to input information into a text field. It include,• <input type="text"> or simply <input> is a standard textbox. This can also have a value attribute, which sets the initial text in the textbox.
• <input type="password"> is similar to the textbox, but the characters typed in by the user will be hidden.
• <input type="checkbox"> is a checkbox, which can be toggled on and off by the user. This can also have a checked attribute (<input type="checkbox" checked> - the attribute doesn't require a value) and makes the initial state of the check box to be switched on, as it were.
2. Textarea Tag :
Textarea is, basically, a large, multi-line textbox. The anticipated number of rows and columns can be defined with rows and cols attributes, although you can manipulate the size to your heart's content using CSS.<textarea rows="5" cols="20">A big load of text</textarea>
3. Select Tag:
The select tag works with the option tag to make drop-down select boxes.<select>
<option>Option 1</option>
<option>Option 2</option>
<option value="third option">Option 3</option>
</select>
When the form is submitted, the value of the selected option will be sent. This value will be the text between the selected opening and closing option tag unless an explicit value is specmeu wune value attribute.
Similar to the checked attribute of checkboxes and radio buttons, an option tag can also have a selected attribute, to start off with one of the items already being selected.
4. Names Tag:
All of the tags mentioned above will look very nice presented on the page but if you hook up your form to a form-handling script, they will all be ignored. This is because the form fields need names. So to all of the fields, the attribute name needs to be added, for example <input type="text" name="hello">.For example:
<form action="contactus.php" method="post">
<p>Name:</p>
<p><input type="text" name="name" value="Your name"></p>
<p>Comments: </p>
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
<p>Are you:</p>
<p><input type="radio" name="areyou" value="male"> Male</p>
<p><input type="radio" name="areyou" value="female"> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite"> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual"> Asexual</p>
<p><input type="submit"></p>
</form>
Q2. Illustrate any six elements (components) used in Form tag with their attributes?
Ans. Following elements used in form tag of HTML are discussed below:1. <input> Tag :
The <input> tag specifies an input field where the user can enter data. <input> elements are used within a <form> element to declare input controls that allow users input data. An input field can vary in many ways, depending on the type attribute.Following list of attributes are given below:
Attribute = accept
Value= file_extension, audio/*, video/*, image/*, media_type
Description= Specifies the types of files that the server accepts (only for type = "file")
Attribute= align
Value= left,right,top,middle,bottom
Description= Not supported in HTML5. Specifies the alignment of an image input (only for type="image")
Attribute= alt
Value= text
Descripton= Specifies an alternate text for images (only for type="image")
Attribute= checked
Value= checked
Description= Specifies that an <input> element should be pre-selected when the page loads (for type="checkbox" or type="radio")
Attribute= disabled
Value= disabled
Description= Specifies that an <input> element should be disabled
Attribute= height
Value= pixels
Description= Specifies the height of an <input> element (only for type="image")
Attribute= list
Value= datalist_id
Description= Refers to a <datalist> element that contains pre-defined options for an <input> element
Attribute= maxlength
Value= number
Description= Specifies the maximum number of characters allowed in an <input> element
Attribute= name
Value= text
Description= Specifies the name of an <input> element
Attribute= readonly
Value= readonly
Description= Specifies that an input field is read-only
Attribute= size
Value= number
Description= Specifies the width, in characters, of an <input> element
Attribute= src
Value= URL
Description= Specifies the URL of the image to use as a submit button (only for type="image")
Attribute= value
Value= text
Description= Specifies the value of an <input> element
2. <textarea> Tag:
The <textarea> tag defines a multi-line text input control. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).Following list of attributes are given below:
Attribute= cols
Value= number
Description= Specifies the visible width of a text area disabled.
Attribute= disabled
Value= disabled
Description= Specifies that a text area should be disabled.
Attribute= name
Value= text
Description= Specifies a name for a text area.
Attribute= readonly
Value= readonly
Description= Specifies that a text area should be read only.
Attribute= rows
Value= number
Description= Specifies the visible number of lines in a text area.
3. <button> Tag:
The <button> tag defines a clickable button. Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.Following list of attributes are given below:
Attribute= disabled
Value= disabled
Description= Specifies that a button should be disabled.
Attribute= name
Value= name
Description= Specifies a name for the button.
Attribute= type
Value= button, reset, submit.
Description= Specifies the type of button.
Attribute= value
Value= text
Description= Specifies an initial value for the button.
4.<option> Tag:
The <option> tag defines an option in a select list. <option> elements go inside a <select> or <datalist> element.Following list of attributes are given below:
Attribute= disabled
Value= disabled
Description= Specifies that an option should be disabled.
Attribute= label
Value= text
Description= Specifies a shorter label for an option.
Attribute= selected
Value= selected
Description= Specifies that an option should be pre-selected when the page loads.
Attribute= value
Value= text
Description= Specifies the value to be sent to a server.
5. <label> Tag:
The <label> tag defines a label for an <input> element. The <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control. The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.Following list of attributes are given below :
Attribute= for
Value= element_id
Description= Specifies which form element a label is bound to.
6. <fieldset> Tag :
The <fieldset> tag is used to group related elements in a form. The <fieldset> tag draws a box around the related elements.7. <optgroup> Tag:
The <optgroup> is used to group related options in a drop-down list. If you have a long list of options, groups of related options are easier to handle for a user.Following list of attributes are given below:
Attribute= disabled
Value= disabled
Description= Specifies that an option-group should be disabled.
Attribute= label
Value= text
Description= Specifies a label for an option-group.
Q3. How many types of forms are available in HTML? Design an order-entry form that contains all the form controls and elements?
Ans. The different types of forms available in HTML are: Order form, Registration form, Enquiry form, Leave form, Contact form etc.<head>
<title>Purchase Order</title>
</head>
<body>
<H1 align="center"> Purchase Order</H1>
<HR><Form action ="form.php" method = "POST">
<table align="center" cellpadding = "10">
<tr>
<td align="left" > <b> Vendor:</b> </td>
<td align ="left" > <b> Ship To:</b> </td>
</tr>
<tr>
<td> <input type="text" name="Vendor's_name" maxlength="20"/> </td>
<td> <input type="text" name="Ship To_name" maxlength="20"/> </td>
</tr>
<tr>
<td align="left"> <b>Address:</b> </td>
<td align="left"> <b>Address:</b> </td>
</tr>
<tr>
<td> <textarea name="Address" rows="4" cols="30"></textarea> </td>
<td> <textarea name="Address" rows="4" cols="30"></textarea> </td>
</tr>
<tr>
<td align="left"> <b> Attention:</b> </td>
</tr><tr>
<td> <input type="text" name="Attention" maxlength="10"/>
</td> </tr>
<tr>
<td align="left"> <b>Quantity</b> </td>
<td align="left"> <b>Unitprice</b> </td>
<td align="left"> <b>Amount</b> </td>
</tr> <tr>
<td> <input type="text" name="Item 1" maxlength="20"/> </td>
<td> <input type="text" name="Quantity" maxlength="10"/> </td>
<td> <input type="text" name="Unit_price" maxlength="10"/> </td>
<td> <input type="text" name="Amount" maxlength="10"/> </td>
</tr> <tr>
<td> <input type="text" name="Item_2" maxlength="20"/> </td>
<td> <input type="text" name="Quantity" maxlength="10"/> </td>
<td> <input type="text" name="Unit_price" maxlength="10"/> </td>
<td> <input type="text" name="Amount" maxlength="10"/> </td>
</tr> <tr>
<td> <input type="text" name="Item_3" maxlength="20"/> </td>
<td> <input type="text" name="Quantity" maxlength="10"/> </td>
<td> <input type="text" name="Unit_price" maxlength="10"/> </td>
<td> <input type="text" name="Amount" maxlength="10"/> </td>
</tr> <tr>
<td> <input type="text" name="Item_4" maxlength="20"/> </td>
<td> <input type="text" name="Quantity" maxlength="10"/> </td>
<td> <input type="text" name="Unit_price" maxlength="10"/> </td>
<td> <input type="text" name="Amount" maxlength="10"/> </td>
</tr>
<tr> <td colspan="2" align="left">
<input type="submit" class=btnlogin value="submit" tab index="4">
</td>
<td>Total</td>
<td> <input type="text" name="Total" maxlength="10"/> </td>
</tr> </table>
</form>
</body>
</html>
Output:
Join us on Facebook and Twitter to get the latest study material. You can also ask us any questions.
Facebook = @ studywow
(click on it or search "studywow" on facebook)
Twitter = @ studywow
(click on it or search "studywow" on Twitter)
Email= studywow.com@gmail.com
Send us your query anytime!
Form tag of HTML or Form tag in HTML