Question:
Create a travel reservation form as indicated in the snapshot below:
The specifications that needs to be adhered to are:
1. Heading of type <h1> should be present with value “Travel Reservation Form”.
2. Heading of type <h3> should be present with the value “*” denotes mandatory.
| S.NO | Element Name | Constraints |
| 1 | passengername | It should be an input field with the type as ‘text’ and the default value (placeholder) should be “Name” . |
| 2 | mobile | Is a mandatory input field. The default value (placeholder) should be “*Mobile Number” . Do not use text field or number field instead use HTML5 feature ‘tel’ field type. |
| 3 | mailId | It is a mandatory input field. The default text (placeholder) is “*Email ID”. Use the input field type as HTML5 Feature ’email’. |
| 4 | travelmonth | This should be a ‘select’ field which should contains a list of dates in the format “MonYYYY” i.e: Aug2018. “Month of Travel” should be the default value. Provide 9 values excluding the default value. |
| 5 | package | It is a mandatory ‘select’ field. “*Origin” should be displayed by default. |
| 6 | destination | It should be an input field with type as ‘text’ and the text “Destination” should be displayed by default (placeholder). |
| 7 | submit | It should be an input field for the submit button. Set the type of the field as ‘submit’ and the value as “Get A Call”. |
| 8 | clear | It should be an input field for the reset/clear button. Set the type of the field as ‘reset’ and the value as “Clear”. |
The options for the ‘select’ component with the name “package” is as follows: GOA,MUMBAI,KERALA,TAMILNADU,KOLKATA.
Use the same values while coding.
SAMPLE FORM
CODE:–
<html>
<centre>
<h1> TRAVEL RESERVATION FORM</h1><br>
<h3> * denotes mandatory </h3>
<hr>
<input type="text" name="passengername" placeholder="Name">
<input type="tel" name="mobile" required placeholder="*Mobile Number"><br>
<input type="email" name="mailId" placeholder="*Email ID" required>
<select name="travelmonth">
<option value="month of travel">Month of Travel</option>
<option value="aug2018">Aug2018</option>
<option value="sep2018">Sep2018</option>
<option value="oct2018">Oct2018</option>
<option value="nov2018">Nov2018</option>
<option value="dec2018">Dec2018</option>
<option value="jan2019">Jan2019</option>
<option value="feb2019">Feb2019</option>
<option value="mar2018">Mar2018</option>
<option value="apr2018">Apr2018</option>
</select>
<br>
<select name="package" required>
<option value="origin"> *Origin</option>
</select>
<input type="text" name=destination placeholder="Destination"><br>
<input type="submit" name="submit" value="Get A Call">
<input type="reset" name="clear" value="Clear">
</centre>
</html>
ConversionConversion EmoticonEmoticon