# HTML 107: Forms and Buttons in HTML

We have come this far in HTML, just three more articles before we complete the HTML course.

Let's take a refresher quiz before we proceed to today's lesson.

## Refresher quiz

<details data-node-type="hn-details-summary"><summary>What is a table in HTML and how are they created?</summary><div data-type="detailsContent">Tables are used to analyze data for display in a structured format for users to easily view them. At the highest level, tables are wrapped in the <code>table</code> tag, with <code>tr</code> table rows nested into it. The first <code>tr</code> wraps a <code>th</code> or table heading, then the next sets of <code>tr</code> rows wrap table data or <code>td</code>, as many as required.</div></details><details data-node-type="hn-details-summary"><summary>What is the HTML tag used to create tables and what purpose does it serve?</summary><div data-type="detailsContent">The <code>table</code> is used as the main wrapper for HTML tables and it helps structure the data into rows and columns.</div></details><details data-node-type="hn-details-summary"><summary>What are table rows and why are they used?</summary><div data-type="detailsContent">The table row <code>tr</code> is used to create data in rows. They are used to group related content and display them horizontally for proper data organization.</div></details><details data-node-type="hn-details-summary"><summary>What HTML tag is used to define the headings of tables?</summary><div data-type="detailsContent">The <code>th</code> or table head tag is used for defining table headings and they are quite different from the regular table data <code>td</code> as they appear bold by default and serve as labels or headings for each column.</div></details><details data-node-type="hn-details-summary"><summary>How are table data defined and what purpose do they serve?</summary><div data-type="detailsContent">Table data cells or <code>td</code> are cells that hold the data on the table to be displayed to the user within the table, corresponding to the rows and column heading.</div></details><details data-node-type="hn-details-summary"><summary>How do you create cell borders in HTML Tables?</summary><div data-type="detailsContent">The <code>border</code> attribute is used inside the opening <code>table</code> tag, and its value is set to 1 and above. This helps to add visual organization to the table structure.</div></details><details data-node-type="hn-details-summary"><summary>How do you justify or push the content of a table to the left, right, or center, and what tag is used for this? Also, how is it used?</summary><div data-type="detailsContent">The <code>align</code> attribute is used for this. Proper alignment is necessary for readability. This attribute is set in the <code>tr</code> table row opening tags, of the the heading.</div></details><details data-node-type="hn-details-summary"><summary>How do expand or reduce the width of a table cell and how is this done?</summary><div data-type="detailsContent">The <code>width</code> attribute is used to define the width of a cell. This is set inside the table row <code>tr</code> opening tags, of the table headings <code>th</code>.</div></details><details data-node-type="hn-details-summary"><summary>How do you add additional rows or columns to a table?</summary><div data-type="detailsContent">Additional Rows are added by adding more <code>tr</code> tags with nested <code>td</code> content, so each new row has some data. Additional columns are added by creating additional <code>th</code> tags nested within the <code>tr</code> tag of the heading section.</div></details><details data-node-type="hn-details-summary"><summary>At a very high level, what is the organizational structure for a table in HTML?</summary><div data-type="detailsContent">First off, at the top of the <code>table</code> element tree is the <code>table</code> tag wrapping the entire table. This is followed by the table heading, then the table data. All the table heading <code>th</code> elements are nested inside a single <code>tr</code> tag. Then each set of table data <code>td</code> tags, representing the data that corresponds to the headings, are nested within <code>tr</code> tags as well. So, if you had 5 headings or <code>th</code> elements for instance, then you would equally have 5 <code>td</code> elements nested within each row <code>tr</code> element for each category of data.</div></details>

Phew!!! That was a lot.

Let's proceed to the subject of today.

## HTML Buttons

Buttons are used in HTML to link users to other pages or sections on your page or to add some other interactivity to our page.

To fully demonstrate Buttons in HTML, we will create a new HTML page in our project, and name it `contact.html`. Create this file inside our `assets` directory.

* Create a boilerplate code for the HTML document and title the page `Contact Me`.
    
* Back in your index page, in your `contacts` section, after the YouTube contact, create a `button` tag and let the button say 'Reach me'.
    

```xml
<button>Reach Me</button>
```

* We need to nest this button element inside of an anchor tag with the value of the `href` attribute pointing to the relative path of the newly created `contact.html` file, as follows:
    

```xml
<a href="./assets/contact.html"><button>Reach Me</button></a>
```

* Make the page load in a different tab by adding the `target="_blank"` attribute to the anchor tag.
    

## HTML Forms

Now, we will create a form on the `contact` page to demonstrate the concept of forms:

* To create a form, you use the `form` tag and nest the `input` and `label` tags in it. Forms typically also have an element for submission. This can either be a `button` or an anchor tag.
    
* Inside our `contact` page, create an `h1` heading with content: `Contact me`.
    
* Create a paragraph element with the following content: `Kindly fill in the form below to get in touch with me`
    
* Create a `form` element using the `form` tag, and just delete the `action` attribute for now.
    

```xml
<h1>Contact Me</h1>
<p>Kindly fill in the form below to get in touch with me</p>
<form>
    
</form>
```

### Radio Button Field

Radio buttons only give users a single option to select from a list of options. We will give the user an option of titles to select from: `Mr`, `Ms` and `Dr`

* Nested inside the form element, create a label tag that says `Title` and add a `for` attribute of `title`.
    
* Next, create 3 pairs of `label` and `input` tags for `Mr`, `Ms` and `Dr` and add `for` attributes of `mr`, `ms` and `dr` to their `label` tags.
    
* In their `input` tags, add a `type` attributes of `radio` and match their `id` to their respective `for` attributes.
    
* Add a `value` attribute in their `input` tags as follows: `mrms` and `dr` respectively. The `value` attribute is necessary for form submission.
    
* It is important to group radio buttons so that only one is selected at a time, to do this, we add a `name` attribute to their `input` tags, giving them the same `value` of `title`. This adds them all in the same group named `title`.
    

```xml

<!-- form element wrapper -->
<form>
<!-- Title field -->
  <label for="title">Title</label>
  
  <!-- Mr label & input-->
  <label for="mr">Mr</label>
  <input type="radio" id="mr" value="mr" name="title">
  
  <!-- Ms label & input-->
  <label for="ms">Ms</label>
  <input type="radio" id="ms" value="ms" name="title">
  
  <!-- Dr label & input-->
  <label for="dr">Dr</label>
  <input type="radio" id="dr" value="dr" name="title">
</form>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712405406582/594f7793-750b-44a4-8aa5-367553e0fc31.png align="center")

### Name Field

* Inside this form tag, nest the first set of `input` and `label` tags to collect users' Names
    
* The `label` tag tells the user what to do within the input area.
    
* The `type` attribute for the `input` label is set to `text` by default, and the `for` attribute for the `label` is set to `name` for screen readers to be able to read it, and also, to move your cursor to the text box if the label is clicked on.
    
* The `id` attribute for the `input` is set to match the `for` attribute of the `label`, to link them
    
* We need a `submit` button, we will create this using an input tag of `type="submit"` right now the submit button doesn't work as expected as we have not set any backend code to receive the form.
    
* Add a `required` attribute to the `input` tag to make that field a must fill field for submission.
    
* Add `minlength` and `maxlength` attributes for 5 to 10 characters
    
* Add a `reset` button by creating an `input` tag and setting the type to `reset`, for the user to be able to reset the form.
    
* Add a placeholder to give the input field a sample text, by adding a placeholder attribute to the input tag.
    
* Add a line break to move the submit and reset buttons to the next line.
    

```xml
<!-- Name Field -->
  <label for="name">Name:</label>
  <input type="text" id="name" minlength="5" maxlength="10" required placeholder="Loche">
  <br>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712405755906/ff67dc1f-6d08-4de2-aeff-d4502a002878.png align="center")

### Password Field

* Within the form tag, create another pair of `label` and `input` tags for our password.
    
* Again, set the `for` attribute of the `label` tag to `password` while matching this with the `id` attribute of the `input` tag.
    
* Set the content for the label tag to `Password`
    
* In the input tag, add attributes for the minlength, maxlength, placeholder, and required, as desired.
    

```xml
<!-- Password field -->
    <label for="password">Password</label>
    <input type="password" id="password" placeholder="********" minlength="6" maxlength="12" required>
    <br>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712447522034/f1b3cc61-f6cd-42ea-be96-3b90054c4c74.png align="center")

### Email Field

* Add another pair of `label` and `input` tags inside the `form` element, just above the `submit` and `reset` buttons.
    
* Set the `for` attribute of the `label` to `email` and add an `Email` content to the `label` tag.
    
* Add a `type` attribute of `email` to the `input` tag, also add a `required` attribute, and set the `id` attribute to `email`, to match the `for` attribute of the `label`. Don't forget to add a placeholder text of `akkre@email.com`.
    

```xml

<!-- Email field -->
    <label for="email">Email</label>
    <input type="email" required placeholder="akkre@email.com" id="email">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712447894277/26bd9156-cd27-4261-97a7-d2c1332c6cc2.png align="center")

### Phone Number Field

* Add another pair of `label` and input `tags` for the phone number field.
    
* To the `label` tag, set the content to Phone Number and add a `for` attribute of `number`.
    
* To the `input` label, set the `type` attribute to `tel` or telephone, the `id` to number, the `placeholder` to `012-3456-7890,` and also set the `required` attribute.
    
* Also, set the `pattern` attribute to match the pattern on the `placeholder`, as follows: `[0-9]{3}-[0-9]{4}-[0-9]{4}`. This means the first 3 digits are numbers from 0-9, then a dash, then the next 4 digits are numbers from 0-9, then a dash, then the last 4 digits are numbers from 0-9.
    

```xml
<!-- Phone Number field -->
    <label for="number">Phone Number</label>
    <input type="tel" required placeholder="012-3456-7890" id="number" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"
    <br>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712448322442/1bf6bbbf-07f0-49df-8d94-96487c1526eb.png align="center")

### Calender Field

This is just for demonstration purposes only.

* Create a label tag and set the content to `Birthday` and the `for` attribute to `birthday`
    
* Create an `input` tag, set the `type` attribute to `date` and `id` to `birthday`. This brings the user a calendar object. Then add a page break after.
    

```xml
<!-- Birthday field -->
    <label for="birthday">Birthday</label>
    <input type="date" id="birthday">
    <br>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712448803061/c22faab1-f668-4f0d-9ff4-1b1eca00c0e6.png align="center")

### Quantity Field

We assume that the user is going to enter a quantity, as though they are making an order, again this is only for demonstration.

* Add a `label` tag and set the `content` to `Number`, also set the `for` attribute to `number`.
    
* Add an `input` tag and set the `type` attribute to `number` and `id` to `number`.
    
* Set the `min` and `max` attributes to `0` and `99` respectively because we don't want the user selecting a negative number.
    
* Set the default value to 1, like so: `value="1"`
    

```xml
<!-- Quantity field -->
    <label for="number">Quantity</label>
    <input type="number" id="number" min="0" max="9" value="1">
    <br>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712449020475/12619dee-80d3-46d5-a19b-136d1599e8fd.png align="center")

### Drop-Down Field

We will create a drop-down menu for card payment. Again we will assume we are paying for a service just for demonstrative purposes.

* Create a `label` tag and set the for attribute to `payment` and content `Payment`
    
* Instead of an `input` tag, we use a `select` tag with `id` attribute set to `payment`, and nest 3 `option` tags
    
* For the 3 `option` tags, set their `value` attributes and `content` to `verve`, `visa` and `giftcard`, and we have just created 3 drop-down menus.
    

```xml
 <!-- Drop-Down menu Field -->
      <label for="payment">Payment</label>
      <select id="payment">
        <option value="verve">Verve</option>
        <option value="visa">Visa</option>
        <option value="giftcard">Giftcard</option>
      </select>
        <br>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712450366463/c628e064-bc53-42dc-b46c-9bbac65af786.png align="center")

### CheckBox Field

We will create a checkbox field for users to subscribe to imaginary newsletters

* Create a `label` tag and set the `for` atribute to `subscribe`, and the content to `Subscribe to my Newsletters`
    
* Create an `input` tag, set the `type` attribute to `checkbox` and the `id` attribute to match the `for` attribute of its `label` tag: `subscribe`
    

```xml
<label for="subscribe">Subscribe to my Newsletters</label>
<input type="checkbox" id="subscribe">
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712451885439/1a07fab4-99bc-455e-af5d-57fb7e4c6c09.png align="center")

### Textarea Field

We will create a textarea for users to be able to type in their comments

* Create a `label` tag and set the `for` attribute to `comment`, and set the `content` to `Type in your Comments`.
    
* Create a `textarea` tag and set the `id` to comment, `cols` to `30` and `rows` to `10`. cols and rows control the columns and rows. Set a placeholder as desired.
    

```xml
<label for="comment">Type in your Comments</label>
<textarea id="comment" col="30" rows="10" placeholder="i like coding"></textarea>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712452776636/d0166593-7b3f-4057-ada3-313116e3e86f.png align="center")

### File Attachment Field

Again, Users will be able to attach files on this page, as follows:

* Create a `label` tag with a `for` attribute of `file`, and content of `Attach a File`.
    
* Create an `input` tag with a `type` attribute of `file` and an `id` of `file`
    
* We can limit or specify the type of file that users can send by adding an `accept` attribute and specifying multiple file `type/extension` in the input tag, seperated by commas.
    
* Also, if you are expecting large sizes of file exchange on the page, it is probably important to set one more attribute to the form tag to be able to process larger files: `enctype="multipart/form-data"`. When we send a large data, this data is first broken down into smaller parts, sent, and the reassembled again.
    

```xml
<label for="file">Attach a File</label>
<input type="file" id="file" >
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712453556705/c5b1d4ef-6997-41cb-a7fa-4df8145f5fae.png align="center")

You can set the file to which the form data is sent as attributes in the form tag, but this is beyond the scope of this article.

This was a lot, but we have covered so much with forms, we can do with some styling but we will do this using CSS, soon.

Thank you for your time.