HTML Forms
Hello there, web enthusiasts! Today, we’re going to dive into the world of HTML Forms. Buckle up, because this is going to be a fun ride!
Table of Contents
What is an HTML Form?
Great question! An HTML form is a section of a document containing form elements. Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more. These forms allow users to enter data that is sent to a server for processing. So, whenever you’re signing up for a new social media account or entering your address for an online delivery, you’re interacting with an HTML form. Neat, right?
Creating a Basic HTML Form
Creating an HTML form is as simple as pie. All you need is the <form> element. This element acts as a container for all the different form controls, like input fields and buttons. Here’s a simple example:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<input type="submit" value="Submit">
</form>In this example, we have a label, an input field for text, and a submit button. When you click the submit button, the form data is sent for processing. But where does it go? Well, that’s where the action attribute comes in!
The Action Attribute
The action attribute defines where the data gets sent. If you don’t set it, the data is sent to the URL of the page containing the form. But you can set it to any URL you want. Here’s how:
<form action="https://example.com/submit_form">
<!-- form elements go here -->
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<input type="submit" value="Submit">
</form>In this case, when the user hits the submit button, the form data is sent to https://example.com/submit_form.
Different Types of Form Controls
HTML forms offer a variety of form controls, each serving a unique purpose. Let’s take a look at some of them:
- Text Fields:
<input type="text">creates a single-line input field for text input. - Radio Buttons:
<input type="radio">creates a radio button that allows users to select one option from a set. - Checkboxes:
<input type="checkbox">creates a checkbox that allows users to select multiple options from a set. - Submit Button:
<input type="submit">creates a button that, when clicked, sends the form data to the server.
HTML Forms Examples
Let’s get our hands dirty with some code examples.
Example 1: A Simple Contact Form
Here’s a simple contact form with fields for name, email, and message.
<form action="/submit_form" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" required></textarea><br>
<input type="submit" value="Submit">
</form>Example 2: A Registration Form
Here’s a registration form with fields for username, password, and a ‘remember me’ checkbox.
<form action="/register" method="post">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" required><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" required><br>
<input type="checkbox" id="remember" name="remember">
<label for="remember">Remember me</label><br>
<input type="submit" value="Register">
</form>Wrapping Up
And there you have it, folks! You’re now equipped with the basics of HTML forms. Remember, practice makes perfect. So, go ahead and start creating your own forms. Happy coding!
Frequently Asked Questions (FAQ)
What is an HTML form?
An HTML form is a section of a document containing form elements. These elements can be different types of input fields, like text fields, checkboxes, radio buttons, and more. HTML forms allow users to enter data that is sent to a server for processing.
What are the types of HTML forms?
HTML forms can contain a variety of form controls, including text fields, radio buttons, checkboxes, submit buttons, dropdown lists, and more. The type of form control used depends on the kind of input the form is designed to collect.
Are HTML forms still used?
Absolutely! HTML forms are a fundamental part of the web. They’re used for everything from search boxes to login forms to contact forms. Anytime you need to collect input from a user, you’ll likely use an HTML form.
How do I create an HTML form in notepad?
Creating an HTML form in notepad is just like creating it in any other text editor. You start with the
<form>tag, add your form controls like<input>and<label>, and close with the</form>tag. Remember to save your file with a .html extension so your browser knows it’s an HTML file.
Related Tutorials
Dr. Mehedi Hasan is a seasoned semiconductor professional, academic and web-designer with over a decade of experience in digital system design and verification as well as web development. Currently a Senior Engineer at AMD in Markham, Ontario, he plays a key role in the development and verification of cutting-edge chip technologies, earning multiple Spotlight Awards for his contributions.
Dr. Hasan holds a Ph.D. in Electrical and Computer Engineering from the University of Saskatchewan and has served in both academia and industry across Canada, Bangladesh, Malaysia, and Saudi Arabia. His expertise spans web-development, UVM-based SystemVerilog verification, static timing analysis (STA), RTL design, and scripting in multiple languages including Python, TCL, Shell as well as web-development tools including HTML, CSS, Javascript.
Passionate about knowledge sharing and education, Dr. Hasan has also worked as an Assistant Professor in Ontario, Canada (at Lakehead University) and Bangladesh University. He is committed to building accessible learning environments and is the founder of SkillSeminary, a platform focused on simplifying complex tech concepts for learners worldwide.
When he's not immersed in chip verification or educational projects, Dr. Hasan enjoys mentoring, researching system development, and promoting open tech education.