design Webform to display bus reservation system in which bus type seat no passenger name address mobile no Date Time Ticket Rate & submit button with use of Required Autofocus placeholder . write code
Answers
Answer:
4.10.1. Introduction
This section is non-normative.
A form is a component of a Web page that has form controls, such as text fields, buttons, checkboxes, range controls, or color pickers. A user can interact with such a form, providing data that can then be sent to the server for further processing (e.g., returning the results of a search or calculation). No client-side scripting is needed in many cases, though an API is available so that scripts can augment the user experience or use forms for purposes other than submitting data to a server.
Writing a form consists of several steps, which can be performed in any order: writing the user interface, implementing the server-side processing, and configuring the user interface to communicate with the server.
4.10.1.1. Writing a form’s user interface
This section is non-normative.
For the purposes of this brief introduction, we will create a pizza ordering form.
Any form starts with a form element, inside which are placed the controls. Most controls are represented by the input element, which by default provides a one-line text field. To label a control, the label element is used; the label text and the control itself go inside the label element. Each area within a form is typically represented using a div element. Putting this together, here is how one might ask for the customer’s name:
<form>
<div><label>Customer name: <input></label></div>
</form>
To let the user select the size of the pizza, we can use a set of radio buttons. Radio buttons also use the input element, this time with a type attribute with the value radio. To make the radio buttons work as a group, they are given a common name using the name attribute. To group a batch of controls together, such as, in this case, the radio buttons, one can use the fieldset element. The title of such a group of controls is given by the first element in the fieldset, which has to be a legend element.
<form>
<div><label>Customer name: <input></label></div>
<fieldset>
<legend> Pizza Size </legend>
<div><label> <input type=radio name=size> Small </label></div>
<div><label> <input type=radio name=size> Medium </label></div>
<div><label> <input type=radio name=size> Large </label></div>
</fieldset>
</form>
Changes from the previous step are highlighted.
To pick toppings, we can use checkboxes. These use the input element with a type attribute with the value checkbox:
<form>
<div><label>Customer name: <input></label></div>
<fieldset>
<legend> Pizza Size </legend>
<div><label> <input type=radio name=size> Small </label></div>
<div><label> <input type=radio name=size> Medium </label></div>
<div><label> <input type=radio name=size> Large </label></div>
</fieldset>
<fieldset>
<legend> Pizza Toppings </legend>
<div><label> <input type=checkbox> Bacon </label></div>
<div><label> <input type=checkbox> Extra Cheese </label></div>
<div><label> <input type=checkbox> Onion </label></div>
<div><label> <input type=checkbox> Mushroom </label></div>
</fieldset>
</form>
The pizzeria for which this form is being written is always making mistakes, so it needs a way to contact the customer. For this purpose, we can use form controls specifically for telephone numbers (input elements with their type attribute set to tel) and e-mail addresses (input elements with their type attribute set to email):
<form>
<div><label>Customer name: <input></label></div>
<div><label>Telephone: <input type=tel></label></div>
<div><label>E-mail address: <input type=email></label></div>
<fieldset>
<legend> Pizza Size </legend>
<div><label> <input type=radio name=size> Small </label></div>
<div><label> <input type=radio name=size> Medium </label></div>
<div><label> <input type=radio name=size> Large </label></div>
</fieldset>
<fieldset>
<legend> Pizza Toppings </legend>
<div><label> <input type=checkbox> Bacon </label></div>
<div><label> <input type=checkbox> Extra Cheese </label></div>
<div><label> <input type=checkbox> Onion </label></div>
<div><label> <input type=checkbox> Mushroom </label></div>
</fieldset>
</form>
We can use an input element with its type attribute set to time to ask for a delivery time. Many of these form controls have attributes to control exactly what values can be specified; in this case, three attributes of particular interest are min, max, and step. These set the minimum time, the maximum time, and the interval between allowed values (in seconds). This pizzeria only delivers between 11am and 9pm, and doesn’t promise anything better than 15 minute increments, which we can mark up as follows:
<form>
Explanation: