HTML Forms

HTML forms are one of the most important elements of web design, and they can be used to collect user data, create interactive elements, and provide users with interactive content. In this article, we'll discuss how to use Forms in your work using HTML. This way you can create various types of HTML Forms.

HTML Form Container

An HTML form is a container element that allows users to input data, including text, checkboxes, radio buttons, and more. Forms have a variety of attributes that you can use to customize their functionality, such as the action attribute, which specifies the URL of the page that should process the data, and the method attribute, which defines the HTTP protocol that should be used for the submission.

Form Element:

Once you have the basic form setup, you’ll need to add the various elements that will collect the user’s data. The most common elements are input fields, textareas, and select menus. Input fields are used to collect simple data, such as text, numbers, and dates. Textareas are used to collect larger amounts of text, while select menus are used to create drop-down menus with multiple choices. You can also use checkboxes and radio buttons to allow users to select multiple options.

The <form> element is used to create an HTML form to user input. Some of the Form Elements include the following:

Input Element:

The HTML <input> element is the most used form element

Text field:

The <input type ="text"> defines a single-line input field for text input.

<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">
</form>

This will look like:

The Label Element:

The <label> tag serves to label for many form elements. It is useful for screen-reader users, because this will help them read out loud the label when the user focuses on the input element. It is also used by people with difficulty clicking on small region.

Radio buttons:

The <input type = "radio"> defines the radio button.

<form>
  <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>
  <input type ="radio" id = "Other" name="gender" value="other">
  <label for ="other">Other</label>
</form>

This will look like:

Checkboxes

The <input type= "checkbox"> shows a checkbox. This gives users zero or more options to a limited amount of choice.

<form>
    <input type = "checkbox" id = "vehicle1" name ="vehicle1" value= "Bike">
      <label for = "vehicle1"> I have a bike</label>
        <br>
    <input type = "checkbox" id = "vehicle2" name ="vehicle2" value= "Car">
      <label for = "vehicle2"> I have a car</label>
</form>

This will look like:

The Submit button

The <input type="submit"> shows a button for submitting the form data to a form handler. The form handler is a file on a server with a script for processing input data.

<form action = "action_page.php">
  <label for ="fname">First name: </label><br>
  <input type ="text" id="fname" name="fname" value = "Emma"><br>
  <label for ="lname">Last name: </label><br>
  <input type ="text" id="lname" name="lname" value = "Smith"><br><br>
  <input type = "submit" value = "Submit">
</form>

This will look like:

The name attribute for input tag

The name attribute is very important because if its omitted the value in the input field will not be sent at all.

<input name="FirstName" type="text" />

When you’re designing a form, it’s important to keep in mind the user experience. Make sure that the labels for each field are descriptive and clear, and that you provide users with clear instructions about how to fill out the form. It’s also important to include validation checks to ensure that the data entered is valid. This can be done with HTML5 attributes such as required and pattern, or with JavaScript code.

Conclusion

Finally, you’ll need to create a way to submit the form data. This is usually done with a submit button, although you can also use JavaScript code to submit the form data via Ajax requests. Make sure that the action attribute of the form points to the URL of the page that will process the data.

Using HTML forms in your project can be a great way to collect user data and create interactive elements. By following the steps outlined in this article, you should be able to create a form that is both user-friendly and efficient.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.