w3resource

HTML CSS Exercise: HTML Form

Solution:

HTML Code :

<!DOCTYPE HTML><!-- Specifies the document type and version of HTML -->
<html lang="en"><!-- Begins the HTML document and sets the language to English -->
<head>
<meta charset=utf-8><!-- Sets the character encoding to UTF-8 -->
<title>HTML CSS Form exercise</title><!-- Sets the title of the webpage -->
</head>
<body>
<div class="container"><!-- Begins a container div -->
<h1>Travel reservation form</h1><!-- Displays the heading "Travel reservation form" -->
<h3>* denotes mandotory</h3><!-- Displays a note indicating mandatory fields -->
<form id="registration_form" method="POST"><!-- Begins a form with the ID "registration_form" and using POST method -->
<label>Full name*:</label><br><!-- Displays a label for full name input -->
<input type="text" name="full_name" placeholder="FirstName LastName" autofocus="autofocus" value=""><br><!-- Creates a text input for full name with placeholder and autofocus -->
<label>Email address*:</label><br><!-- Displays a label for email address input -->
<input type="text" name="email_addr" value=""><br><!-- Creates a text input for email address -->
<label>Select Tour Package* :</label><br><!-- Displays a label for package selection -->
<select name="package"><!-- Creates a dropdown menu for selecting a tour package -->
<option value="Goa" >Goa</option><!-- Option for Goa package -->
<option value="Kashmir" >Kashmir</option><!-- Option for Kashmir package -->
<option value="Rajasthan" >Rajasthan</option><!-- Option for Rajasthan package -->
</select><br>
<label>Arrival date*:</label><br><!-- Displays a label for arrival date input -->
<input type="text" name="arv_dt" placeholder="m/d/y" value=""><br><!-- Creates a text input for arrival date with placeholder -->
<label>Number of persons*:</label><br><!-- Displays a label for number of persons input -->
<input type="text" name="persons" value=""><br><!-- Creates a text input for number of persons -->
<label>What would you want to avail?*</label><br><!-- Displays a label for facilities selection -->
  Boarding<input type="checkbox" name="facilities[]" value="boarding"  ><br><!-- Checkbox for boarding -->
  Fooding<input type="checkbox" name="facilities[]" value="fooding"  ><br><!-- Checkbox for fooding -->
  Sight seeing<input type="checkbox" name="facilities[]" value="sightseeing"  ><br><!-- Checkbox for sight seeing -->
<label>Discount Coupon code:</label><br><!-- Displays a label for discount coupon code input -->
<input type="text" name="dis_code" value=""><br><!-- Creates a text input for discount coupon code -->
<label>Terms and conditions*</label><br><!-- Displays a label for terms and conditions -->
<input type="radio" name="tnc" value="agree" checked>I agree <!-- Radio button for agreeing to terms -->
<input type="radio" name="tnc" value="disagree" >I disagree<br><!-- Radio button for disagreeing to terms -->
<button type="submit" class="btn btn-large btn-primary" name="submit">Complete reservation</button><!-- Submit button for completing reservation -->
</form><!-- Ends the form -->
</div><!-- Ends the container div -->
</body>
</html>

Explanation:

  • This HTML code creates a travel reservation form.
  • It includes various input fields for capturing user information.
  • The form includes text inputs, dropdown menus, checkboxes, radio buttons, and a submit button.
  • Some inputs are marked as mandatory using an asterisk (*).
  • The form is contained within a <div> element with the class "container".

    • Live Demo:

    See the Pen form-answer by w3resource (@w3resource) on CodePen.


    Supported browser

    Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
    YesYesYesYesYes

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://w3resource.com/html-css-exercise/form-answer.php