Creating a form in HTML is simple. You can use the <form> element to define the structure of the form.
· <form>: Defines the form and includes action where to send the form data and method (GET or POST).
· <label>: Provides a label for input elements.
· <input>: Various types (e.g., text, email, radio, checkbox).
· <textarea>: For multi-line text input.
· <select>: For dropdown options.
· <button>: To submit the form.
form.html
<form action="#" method="post" class="basic-form">
<h6>Basic Form</h6>
<!-- Text input for Name -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter Your Name" required>
<br><br>
<!-- Email input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter Your Email" required>
<br><br>
<!-- Radio buttons for Gender -->
<label>Gender:</label>
<div class="form-inline">
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</div>
<br><br>
<!-- Dropdown select -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="in">India</option>
<option value="us">United State</option>
<option value="uk">United Kingdom</option>
</select>
<br><br>
<!-- Textarea for message -->
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" placeholder="Enter Your Message" cols="50" required></textarea>
<br><br>
<!-- Submit Button -->
<button type="submit">Submit</button>
</form>
style.css
body{
font-family: Arial, Helvetica, sans-serif;
}
.basic-form{
background: #F9F9F9;
max-width: 400px;
padding: 25px;
margin: 50px auto;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.basic-form input[type="text"], .basic-form input[type="email"], .basic-form textarea, .basic-form select
{
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
.basic-form button[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}
.basic-form h6{
font-size: 18px;
color: #000;
text-align: center;
margin: 0px 0px 15px;
}
.basic-form label
{
font-size: 14px;
margin-bottom: 5px;
display: block;
}
.basic-form .form-inline label{
display: inline;
}
Demo:
© 2025Think4u. All Rights Reserved.