Skip to main content

Creating Forms in HTML (Live Playground)

Introduction​

HTML forms are an essential part of web development, allowing users to submit data, such as login credentials, contact information, or survey responses. In this tutorial, you will learn how to create and style forms in HTML using form elements like <form>, <input>, <textarea>, <select>, <option>, <button>, and <label>. You will also learn about form accessibility and submission.

Creating a Basic Form​

To create a form in HTML, use the <form> element. Inside the form element, add various form controls, such as text inputs, radio buttons, checkboxes, and buttons. Here's an example of a simple contact form:

HTML
<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />

  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">Submit</button>
</form>
Live Playground, Try it Yourself

Form Controls​

HTML offers various form controls to collect different types of data from users. Some common form controls include:

  • <input>: A versatile form control that can be used for various input types, such as text, email, password, radio buttons, and checkboxes.
  • <textarea>: A multi-line text input for collecting longer text, such as comments or messages.
  • <select> and <option>: A drop-down list for selecting one or multiple options.
  • <button>: A button for triggering form submission or other actions.

Here are some examples of form controls:

Text Input​

HTML
<label for="username">Username:</label> <input type="text" id="username" name="username" />

Password Input​

HTML
<label for="password">Password:</label> <input type="password" id="password" name="password" />

Radio Buttons​

HTML
<label for="gender-male">Male</label>
<input type="radio" id="gender-male" name="gender" value="male" />
<label for="gender-female">Female</label>
<input type="radio" id="gender-female" name="gender" value="female" />

Checkboxes​

HTML
<label for="newsletter">Subscribe to newsletter</label> <input type="checkbox" id="newsletter" name="newsletter" />
HTML
<label for="country">Country:</label>
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="ca">Canada</option>
</select>
Live Playground, Try it Yourself

Styling Forms​

You can use CSS to style your forms and form controls, such as adding borders, padding, and background colors. It's recommended to use an external CSS file for styling. Here's an example of how to style forms using an external stylesheet:

HTML
<!-- Add a link to the external CSS file in the head section of your HTML document -->
<link rel="stylesheet" href="styles.css" />

In your styles.css file, add the following CSS rules:

CSS
/* Style the form */
form {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
}

/* Style form labels */
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

/* Style form input fields */
input[type='text'],
input[type='password'],
input[type='email'],
textarea,
select {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  outline: none;
}

/* Style form buttons */
button[type='submit'] {
  padding: 10px 20px;
  background-color: #4caf50;
  border: none;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

/* Add a hover effect to form buttons */
button[type='submit']:hover {
  background-color: #45a049;
}

/* Style form checkboxes and radio buttons */
input[type='checkbox'],
input[type='radio'] {
  margin-right: 5px;
  vertical-align: middle;
}
Live Playground, Try it Yourself

Form Accessibility​

To ensure your forms are accessible, always associate form labels with their respective form controls using the for attribute on the <label> element and the id attribute on the form control. This makes it easier for screen readers and other assistive technologies to understand the purpose of each form control.

HTML
<label for="username">Username:</label> <input type="text" id="username" name="username" />
Live Playground, Try it Yourself

Form Submission​

To submit a form, you can use the <button type="submit"> element or the <input type="submit"> element. When the user clicks the submit button, the form data is sent to the server for processing. Use the action attribute on the <form> element to specify the URL where the form data should be sent, and the method attribute to specify the HTTP method (GET or POST) to use for sending the form data.

HTML
<form action="/submit" method="post">
  <!-- Add form controls here -->
  <button type="submit">Submit</button>
</form>
Live Playground, Try it Yourself

Conclusion​

Forms are a crucial part of web development, allowing users to submit data to a web server. In this tutorial, you learned how to create and style HTML forms using form elements like <form>, <input>, <textarea>, <select>, <option>, <button>, and <label>. You also learned about form accessibility and submission.