Websites are not just for displaying information; they are also powerful tools for gathering information from visitors. One of the most fundamental ways to collect user input on the web is through forms. Think of web forms as the digital equivalent of paper forms you encounter in everyday life. They allow users to fill in fields and submit data to be processed by a website or application.
In this tutorial, we will delve into the essentials of creating forms in HTML. Our focus will be on structuring the form itself using HTML, rather than processing the data submitted through the form, which is a topic for separate discussions.
Let’s get started and explore the world of HTML forms!
Understanding HTML Forms: The <form> Tag
In HTML, forms are created using the <form> tag. This tag acts as a container for all the interactive elements within your form. To make a form functional, you need to specify a couple of crucial attributes:
action: This attribute defines the URL or script that will process the form data once it’s submitted. Essentially, it’s the destination where the collected information will be sent.method: This attribute specifies the HTTP method used to send the form data. The two most common methods areGETandPOST.
Here’s a basic example of the <form> tag:
<form action="process.php" method="GET">
</form>In this snippet, the action attribute is set to “process.php”, indicating that a PHP script named “process.php” will handle the form data. The method is set to “GET”. While this HTML code defines the form structure, it won’t display anything visible on its own because we haven’t added any fields for user input yet.
Form Fields: The Input Areas
Fields are the interactive parts of a form where users enter data. These are the blanks you see on a form that you can type or select options in. HTML provides various types of fields using the <input> tag and other form elements.
Let’s look at a simple example of a text field:
<input type="text" name="info" />This line of code creates a basic text input field. Let’s break down the attributes:
type: This attribute is essential as it defines the type of input field. In this case,type="text"specifies a standard text field for single-line text input.name: Thenameattribute is crucial for server-side processing. It assigns a name to the field, which acts as a key when the form data is sent. In our example, the field is named “info”. This name will be used to access the entered data in the processing script (likeprocess.phpin our earlier example).
Practice: Building a Login Form
Let’s put our knowledge into practice by creating a common form: a login form. A typical login form usually includes:
- A field for username or email input.
- A field for password input.
- A “Remember Me” checkbox.
- A button to submit the login information.
Here’s the HTML code for a login form:
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body>
<form action="login.php" method="POST">
<fieldset>
<legend>Login</legend>
<p>
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="username..." />
</p>
<p>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="password..." />
</p>
<p>
<label for="remember">
<input type="checkbox" id="remember" name="remember" value="remember" /> Remember me
</label>
</p>
<p>
<input type="submit" name="submit" value="Login" />
</p>
</fieldset>
</form>
</body>
</html>A simple HTML login form with username and password fields.
Let’s analyze the code:
-
We’ve created four input fields within the
<form>:username:type="text"for text-based usernames.password:type="password"for password input (characters are masked for security).remember:type="checkbox"for a “Remember me” option.submit:type="submit"to create a button that submits the form.
-
The fields are grouped within a
<fieldset>tag. The<fieldset>creates a visual border around related form elements, and the<legend>tag provides a caption for the fieldset (“Login” in this case). -
We use
<label>tags to provide descriptive text for each input field, improving accessibility and user experience. Theforattribute in the<label>is linked to theidof the input field, associating the label with the input. -
placeholderattribute: This attribute is used in theusernameandpasswordfields to display temporary text inside the input box, giving the user a hint about what to enter (e.g., “username…”). -
valueattribute: Thevalueattribute in the checkbox sets the value that will be sent to the server if the checkbox is checked. In the submit button,value="Login"sets the text displayed on the button. -
Each field is wrapped in a
<p>tag for better visual spacing and structure.
Practice: Building a Contact Form
Next, let’s create a contact form, a standard feature on websites to allow visitors to get in touch with website administrators.
Here’s the HTML code for a contact form:
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
</head>
<body>
<form action="contact.php" method="POST">
<fieldset>
<legend>Contact</legend>
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="your name..." />
</p>
<p>
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" placeholder="subject..." />
</p>
<p>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="your email..." />
</p>
<p>
<input type="submit" name="submit" value="Send" />
</p>
</fieldset>
</form>
</body>
</html>A basic HTML contact form with fields for name, subject, and email.
In this contact form example, we introduce type="email" for the email field. This input type provides basic client-side validation, ensuring that the user enters a valid email address format. If you try to submit the form with an invalid email, the browser will display a warning.
Browser validation error when an invalid email is entered in the contact form.
Practice: Building a Registration Form
Let’s increase the complexity and build a registration form. Registration forms typically require more information from the user. Our registration form will include fields for:
- Full Name
- Username
- Password
- Gender
- Religion
- Biography
Here’s the HTML code for a registration form:
<!DOCTYPE html>
<html>
<head>
<title>Registration</title>
</head>
<body>
<form action="register.php" method="POST">
<fieldset>
<legend>Registration</legend>
<p>
<label for="nama">Name:</label>
<input type="text" id="nama" name="nama" placeholder="Full name..." />
</p>
<p>
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Username..." />
</p>
<p>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your email..." />
</p>
<p>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Password..." />
</p>
<p>
<label>Gender:</label>
<label for="male">
<input type="radio" id="male" name="jenis_kelamin" value="laki-laki" /> Male
</label>
<label for="female">
<input type="radio" id="female" name="jenis_kelamin" value="perempuan" /> Female
</label>
</p>
<p>
<label for="agama">Religion:</label>
<select id="agama" name="agama">
<option value="islam">Islam</option>
<option value="kristen">Christianity</option>
<option value="hindu">Hinduism</option>
<option value="budha">Buddhism</option>
</select>
</p>
<p>
<label for="biografi">Biography:</label>
<textarea id="biografi" name="biografi"></textarea>
</p>
<p>
<input type="submit" name="submit" value="Register" />
</p>
</fieldset>
</form>
</body>
</html>A more complex HTML registration form incorporating radio buttons, dropdown select, and textarea.
New form elements introduced in this registration form are:
-
radioinput type: Radio buttons (type="radio") are used when you want the user to select only one option from a set of choices. Notice that radio buttons in a group share the samenameattribute (name="jenis_kelamin"in this case), which ensures that only one can be selected at a time. Each radio button has a distinctvalueattribute. -
<select>element: The<select>element creates a dropdown list.<option>tags within<select>define the available options in the dropdown. Thevalueattribute of the<option>is the value sent to the server when that option is selected. -
<textarea>element: The<textarea>tag creates a multi-line text input area, suitable for longer text inputs like biographies or comments.
What’s the difference between radio and checkbox?
- Use
radiobuttons when you want the user to select only one option from a predefined set. - Use
checkboxes when you want the user to select multiple options or simply toggle an option on or off.
The <select> dropdown also provides a way to choose one option from a list, similar to radio buttons, but in a more compact dropdown format, which is useful when you have many options. For lengthy text input, <textarea> is the appropriate choice.
Practice: Exploring Advanced Form Field Types
The form fields we’ve covered so far are commonly used in web forms. However, HTML offers even more input types, including meter, color, url, number, date, datetime-local, and more.
Let’s experiment with a few of these advanced types:
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Examples</title>
</head>
<body>
<form action="submit_advanced_form.php" method="POST">
<fieldset>
<legend>Advanced Form Fields</legend>
<p>
<label for="website">Website Address:</label>
<input type="url" id="website" name="website" placeholder="Enter Website URL..." />
</p>
<p>
<label for="birthdate">Date of Birth:</label>
<input type="date" id="birthdate" name="tanggal" />
</p>
<p>
<label for="age">Age:</label>
<input type="number" id="age" name="umur" min="10" max="90" />
</p>
<p>
<input type="submit" name="submit" value="Send" />
</p>
</fieldset>
</form>
</body>
</html>HTML form showcasing URL, date, and number input types.
In this example:
type="url": Theurlinput type is designed for website addresses. It often includes client-side validation to ensure the user enters a valid URL format.type="date": Thedateinput type provides a date picker interface in modern browsers, making it easy for users to select a date. If your browser supports it, you’ll see a calendar interface when you focus on this field.type="number": Thenumberinput type is for numeric input. Theminandmaxattributes can be used to set minimum and maximum allowed values for the number field, and the browser may enforce these constraints.
If you don’t see a calendar interface with the date input type, ensure you are using a modern, up-to-date web browser.
What’s Next?
This tutorial has introduced you to the fundamental tags and fields for creating HTML forms, focusing on the most commonly used elements. There are still many more input types and form-related HTML features to explore, such as meter, color, time, and form validation attributes.
The best way to solidify your understanding is to continue practicing. Experiment with different input types, build various forms, and explore the extensive capabilities of HTML forms. Happy coding!
