How to create form in HTML: HTML forms are essential for collecting data from user input. These data could be anything from contact information or a user?s log in details for a website. Apart from textboxes which are a common feature in most forms, HTML5 provides several other special elements that enhance the functionality of a form. These include input boxes, radio-buttons, checkboxes, submit buttons and many more. A good form should be self-explanatory so that users can easily to input necessary details and submit them to the web server for processing. Below are a few key elements that are used to create forms and how they are applied.
The input element ? this is perhaps the most essential element because it helps you specify various types of input fields such as checkbox, textfield, radio button, submit button, and reset buttons.
How to create form in HTML?
Text fields: These are one line areas that allow the user to input short text variables. Below is an example of code that displays a labeled textbox.
<form> <label for="username">Username:</label> <input type="text" name="username" id="username"> </form>
Take note of how the <label> element is used to provide labels for input types. If you want the user to enter several lines of text, substitute the input type text with <textarea>.
Password field: The password field is similar to the textbox with the only difference being that characters in a password field are masked in dots or asterisk to prevent an onlooker from reading them on-screen.
Example
Textarea
<textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea>
<button> Element
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
<datalist> Element
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<legend>
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30"><br>
Email: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
<label>
<form action="/action_page.php"> <label for="male">Male</label> <input type="radio" name="gender" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="gender" id="female" value="female"><br> <label for="other">Other</label> <input type="radio" name="gender" id="other" value="other"><br><br> <input type="submit" value="Submit"> </form>
<output>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form>
Radio Button
This control allows a user to select exactly one option from a list. The syntax for radio buttons is illustrated in the example below.
<!DOCTYPE html> <html> <body> <form action=""> <input type="radio" name="gender" value="male"> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </form> <p><b>Note:</b> When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p> </body> </html>
Checkbox
Unlike radio buttons, checkboxes allow users to select more than one option from a pre-defined list. To create a checkbox, use the <input> element and assign its type attribute the value, checkbox.
<!DOCTYPE html> <html> <body> <form action="/action_page.php" method="get"> <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br> <input type="submit" value="Submit"> </form> </body> </html>
Select Boxes
This control allows users to select one or more options from a dropdown list. To create a select box, use the <select> element in conjunction with the <option> element.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
</form>
</body>
</html>
Submit and reset buttons
A submit button relays the information that a user fills in a form to an application on the webserver that processes it. On the other hand, a reset button reverts all form controls to their default values. Note that the <button> element extends the functionality of buttons in HTML by offering richer features.
<form method="POST" action="example.aspx"> <p><input type="text" name="name" size="30"></p> <p> <input type="submit" name="button_a" value="Button A"> <input type="submit" name="button_b" value="Button B"> <input type="submit" name="button_c" value="Button C"> <input type="reset" value="Reset"> </p> </form>
How To Create a Contact Form
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
</head>
<body>
<h3>Contact Form</h3>
<div class="container">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
CSS
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #45a049;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
