HTML Forms

Learn to code, learn web development basics, start a career in tech.

HTML Forms

Last edited: Aug 1 2019

HTML Forms are used for collecting different kinds of user inputs, e.g contact details such as name, email address, phone numbers or a message.

Different form tags are used to collect different types of user input, example HTML Tags are: input field, checkboxes, radio-buttons, submit buttons and many more.

The <form> tag is used to create HTML Forms, below is an example of a login form:

<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<form>
<fieldset>
<legend>Log In</legend>
<label>Username: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
 </html>

Our login example above uses a few HTML Tags, now let’s explore more Form Tags and see some examples of how to use them when coding HTML.

If you look closely there is something new happening to our Tag, <input> tag now something inside it type = “text” this is called attribute, we will visit these attributes more as we go on.

What we need to know for now is that, a tag can have one or more attributes, and these attributes go on to enhance HTML Tags to behave differently, the example below is saying that this input type is of type text, it could also be checkbox or submit button.

<input type="text">

For the following examples, we shall assume that you have already written the default HTML code required, and every code sample below, can be copied and pasted into the <body> tag.

Text Fields

When you need a field for data input such as filling in fullname in a form field, you use <input> element with type ‘text’ attribute you then give it a name you want to identify it by, we also assign an id which is used to identify the input.

 <form>
  <label for="fullname">fullname:</label>
  <input type="text" name="fullname" id=”fullname”>
 </form>

Password Fields

The password field is very similar to the text field, the difference is the attribute we give it is type=’password’ this prevents others from being able to read the password when you are typing it.

<form>
  <label for="pwd">Password:</label>
  <input type="password" name="pwd" id=”pwd”>
</form>

Radio Buttons

With radio button we want to give the name attributes for both inputs to be the same, this way user can only select one radio button at a time.

<form>
  <input type="radio" name="sex" id="male">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="female">
  <label for="female">Female</label>
</form>

Checkboxes

Checkboxes allow users to select more than one option, it simply has an attribute type=”checkbox” which differenciates it from radio button or text field.

<form>
  <input type="checkbox" id="rowing">
  <label for="rowing">Rowing</label>
  <input type="checkbox" id="swimming">
  <label for="swimming">Swimming</label>
  <input type="checkbox" id="basketball">
  <label for="basketball">Basketball</label>
 </form>

The output of the above code:

File Select box

File field allows a user to browse and upload a file to a form, the main attribute to concentrate on is the type=”file” this attribute puts a button that makes it possible to upload a file.

<form>
  <label for="file-select">Upload:</label>
  <input type="file" name="upload" id="file-select">
 </form>

Textarea

When you want to enter multiple-line text then the <textarea> element is the one to use, this one is written differently to the usual input, it also has an attribute col and rows.

<form>
  <label for="message">Message:</label>
  <textarea rows="3" cols="30" name="message" id”message”></textarea>
 </form>

Select Boxes

Select element creates a dropdown list, it uses <option> tag with the value attribute, the value attribute is the actual value that will be submitted by the form eg Australia.

<form>
  <label for="country">Country:</label>
  <select name="country" id="country">
  <option value="australia">Australia</option>
  <option value="kenya">Kenya</option>
  <option value="china">China</option>
  </select>
 </form>

Submit Button

Submit button is just like any other input element, but it has a type = “submit” this element is used for submitting form data, and the value attribute is the value printed on the submit button.

<form action="form.php" method="post">
  <label for="fullname">Fullname:</label>
  <input type="text" name="first-name" id="fullname">
  <input type="submit" value="Submit">
 </form>