HTML Form Code
To create a form inside your HTML document, use the HTML code below.
A Sample Form Without Styles
There is no CSS used in this example; it is just raw HTML.
<form method="get" action="/html/form_handler.cfm">
<p>
<label>Name
<input type="text" name="customer_name" required>
</label>
</p>
<p>
<label>Phone
<input type="tel" name="phone_number">
</label>
</p>
<p>
<label>Email
<input type="email" name="email_address">
</label>
</p>
<fieldset>
<legend>Which phone do you want?</legend>
<p><label> <input type="radio" name="taxi" required value="car"> Redmi </label></p>
<p><label> <input type="radio" name="taxi" required value="van"> Samsung </label></p>
<p><label> <input type="radio" name="taxi" required value="tuktuk"> Nokia </label></p>
</fieldset>
<fieldset>
<legend>Extras</legend>
<p><label> <input type="checkbox" name="extras" value="baby"> Mobile Cover </label></p>
<p><label> <input type="checkbox" name="extras" value="wheelchair"> Power Bank </label></p>
<p><label> <input type="checkbox" name="extras" value="tip"> Mobile Stand </label></p>
</fieldset>
<p>
<label>Pickup Date/Time
<input type="datetime-local" name="pickup_time" required>
</label>
</p>
<p>
<label>Pickup Place
<select id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="office" >Mobile Office</option>
<option value="town_hall" >Mobile Store</option>
<option value="telepathy" >Mobile Care</option>
</select>
</label>
</p>
<label>Dropoff Place
<select id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="office" >Airport</option>
<option value="town_hall" >Railway Station</option>
<option value="telepathy" >Bashtec House Manigam</option>
</select>
</label>
<p>
</p>
<p>
<label>Special Instructions
<textarea name="comments" maxlength="500"></textarea>
</label>
</p>
<p><button>Submit Booking</button></p>
</label>
The same form with labels aligned at the top
This form is identical, but CSS has been used to make sure the labels are visible above the input fields. Additionally, some additional light styling has been applied.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<!-- CSS -->
<style>
.myForm {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.8em;
width: 20em;
padding: 1em;
border: 1px solid #ccc;
}
.myForm * {
box-sizing: border-box;
}
.myForm fieldset {
border: none;
padding: 0;
}
.myForm legend,
.myForm label {
padding: 0;
font-weight: bold;
}
.myForm label.choice {
font-size: 0.9em;
font-weight: normal;
}
.myForm input[type="text"],
.myForm input[type="tel"],
.myForm input[type="email"],
.myForm input[type="datetime-local"],
.myForm select,
.myForm textarea {
display: block;
width: 100%;
border: 1px solid #ccc;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.9em;
padding: 0.3em;
}
.myForm textarea {
height: 100px;
}
.myForm button {
padding: 1em;
border-radius: 0.5em;
background: #eee;
border: none;
font-weight: bold;
margin-top: 1em;
}
.myForm button:hover {
background: #ccc;
cursor: pointer;
}
</style>
</head>
<body>
<form class="myForm" method="get" action="/html/form_handler.cfm">
<p>
<label>Name
<input type="text" name="customer_name" required>
</label>
</p>
<p>
<label>Phone
<input type="tel" name="phone_number">
</label>
</p>
<p>
<label>Email
<input type="email" name="email_address">
</label>
</p>
<fieldset>
<legend>Which phone do you want?</legend>
<p><label class="choice"> <input type="radio" name="taxi" required value="car"> O Redmi </label></p>
<p><label class="choice"> <input type="radio" name="taxi" required value="van"> O Samsung </label></p>
<p><label class="choice"> <input type="radio" name="taxi" required value="tuktuk"> O Nokia </label></p>
</fieldset>
<fieldset>
<legend>Extras</legend>
<p><label class="choice"> <input type="checkbox" name="extras" value="baby"> O Mobile Cover </label></p>
<p><label class="choice"> <input type="checkbox" name="extras" value="wheelchair"> O Mobile Stand </label></p>
<p><label class="choice"> <input type="checkbox" name="extras" value="tip"> O Power Bank </label></p>
</fieldset>
<p>
<label>Pickup Date/Time
<input type="datetime-local" name="pickup_time" required>
</label>
</p>
<p>
<label>Pickup Place
<select id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="office" >Mobile Office</option>
<option value="town_hall" >Mobile Care</option>
<option value="telepathy" >Mobile Point</option>
</select>
</label>
</p>
<p>
<label>Dropoff Place
<select id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="office" >Airport</option>
<option value="town_hall" >Railway Station</option>
<option value="telepathy" >Bashtec House</option>
</select>
</label>
</p>
<p>
<label>Special Instructions
<textarea name="comments" maxlength="500"></textarea>
</label>
</p>
<p><button>Submit Booking</button></p>
</form>
</body>
</html>
That is Great! You have now learnt to create a Different Style Form in Blog with HTML Code. Please feel free to leave any constructive feedback, suggestions or questions in the comments and I'll get back to you as quick as I can with concrete solutions. Want to know more about blog writing, please mention. I will make a tutorial on.
Thankyou
BashTec
Read Also: