This tutorial guides beginners through the process of creating HTML forms using HTML5 and CSS3. It covers essential form elements, including input fields, checkboxes, radio buttons, dropdown menus, and text areas.
The tutorial emphasises the importance of proper coding practices and introduces basic validation techniques. By the end, readers will understand how to structure forms effectively and prepare for further enhancements with CSS and PHP.
Welcome to the ninth part of the Web Designer HTML5 and CSS beginners tutorial. In this tutorial, we will focus on building forms using HTML form tags. Forms are essential for collecting user input on websites, and understanding how to create them is a fundamental skill for web developers.
To get started, open your web browser and Notepad++. Arrange your browser on the left side and Notepad++ on the right. If you don’t see your previous code in Notepad++, open the folder where you saved your HTML file and drag it into Google Chrome to view it. Then, drag it back into Notepad++ to see the code side by side with the web page.
Let’s begin by creating a basic form. First, we will add a horizontal rule to separate our form from the previous content. This can be done using the <hr> tag. Next, we will look at a typical form example from a portfolio website, which includes various input fields such as checkboxes, dropdown menus, and text areas.
Adding the Form Tag
In our code, we will start by adding a <form> tag. The <form> tag is essential as it defines the form and its elements. After adding the form tag, save your work and refresh the browser. You may not see any changes yet, but that’s okay; we are just getting started.
Adding a Heading
Above the form, we will add a heading using the <h2> tag. Let’s call it “Get a Free Quote”. This heading will help users understand the purpose of the form. Remember, the <h1> tag should only be used once per page, while you can use multiple <h2> tags.
Input Fields
Now, we will create input fields for users to enter their information. The first field will be for the user’s name. We will use the <input> tag with the type set to “text”. After saving and refreshing, you should see a field for the first name.
Next, we will add another input field for the last name. Again, ensure you save your changes and refresh the browser to see the updates.
Collecting Contact Information
To gather more information, we will add an input field for the user’s email address. This time, we will set the type to “email”. Using the email type allows for basic validation, ensuring that users enter a valid email format.
Following the email field, we will add another input field for the user’s phone number, also using the text type.
Service Selection
Next, we want to ask users to select a service. We will create a section with checkboxes for different services. Each checkbox will allow users to select one or more services they are interested in. For example, we can include options like “Website Design” and “Graphic Design”. Each checkbox will be created using the <input type=”checkbox”> tag.
Budget Dropdown Menu
To further refine our form, we will add a dropdown menu for users to select their budget. This will be done using the <select> tag, with multiple <option> tags inside it to represent different budget ranges. For example, options could include ranges like “0 to 100”, “100 to 200”, and so on.
Existing Website Question
We will also ask users if they have an existing website. This will be done using radio buttons, which allow users to select only one option. We will create two radio buttons: “Yes” and “No”. To ensure that only one can be selected at a time, both radio buttons must have the same name attribute.
Comments Section
Next, we will add a text area for users to enter any additional comments or messages. This is done using the <textarea> tag. We can specify the number of rows and columns to control the size of the text area. For example, we can set it to 10 rows and 30 columns.
Submit Button
Finally, we need a button for users to submit the form. This is done using the <input type=”submit”> tag. We can customise the button’s text to say “Get a Free Quote”. When users click this button, the form data will be sent for processing.
Form Action and Processing
To make the form functional, we need to specify an action attribute in the <form> tag. This attribute defines where the form data will be sent when submitted. Typically, this would point to a PHP script that processes the data. For demonstration purposes, we can set it to redirect to a specific URL.
Conclusion
In this tutorial, we have covered the basics of creating an HTML form using HTML5 and CSS3. We explored various form elements, including input fields, checkboxes, radio buttons, dropdown menus, and text areas. We also discussed the importance of proper coding practices and introduced basic validation techniques.
As you continue your journey in web development, remember that forms are a crucial part of user interaction on websites. In future tutorials, we will enhance the appearance of our forms using CSS and add functionality with PHP. Stay tuned for more advanced topics!
