1. Introduction

In this tutorial, we aim at guiding you through the process of creating a basic HTML form from scratch.

You will learn:
- Basic structure of an HTML form.
- Adding different types of input fields.
- Designing a user-friendly form layout.

Prerequisites

• Basic understanding of HTML and CSS.

2. Step-by-Step Guide

Forms are essential for any web page used to collect user input, such as contact details, feedback, or any other type of information.

HTML Form Structure

An HTML form is created using the <form> element. Inside this form element, you can place input elements like text fields, checkboxes, radio-buttons, submit buttons and more to create a complete form.

<form>
<!-- form elements go here -->
</form>

Adding Inputs

Within the form, we can add various types of input fields. Let's start with the most common, the text field.

<form>
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>
  <input type="submit" value="Submit">
</form>

In the above example, label is used to define the label for the "name" input field. input defines an input control. The type attribute for input defines what kind of input field to display. The id attribute is a unique identifier for the input field. The name attribute is used to reference the form data after a form is submitted.

Form Layout and Design

HTML forms can be styled with CSS to improve aesthetics and usability.

<style>
form {
  padding: 20px;
  background-color: #f8f9fa;
  max-width: 500px;
  margin: auto;
}
</style>

In the CSS code above, we've added padding around the form, set a background color, and centered the form on the page.

3. Code Examples

Let's create a more complex form with different types of input fields.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br>
  <input type="submit" value="Submit">
</form>

In this example, we've added two text fields for first name and last name, and an email field. The type="email" attribute specifies that the input field should be of type email.

4. Summary

In this tutorial, we learned the basic structure of an HTML form, how to add different types of input fields, and how to style our form for a user-friendly layout.

Next, you may want to learn about form validation, handling form data, and more complex form elements like dropdowns, date pickers, and sliders.

5. Practice Exercises

Exercise 1

Create a form with fields for entering a username and password.

Solution

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password"><br>
  <input type="submit" value="Submit">
</form>

Exercise 2

Add a radio button to the form created in Exercise 1 to select the user's gender.

Solution

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password"><br>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="submit" value="Submit">
</form>

Tips for further practice

Try to create forms with different types of fields like checkboxes, date pickers, file inputs, etc. Also, practice styling your forms with CSS for a better user experience.