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

What is a table in HTML and how are they created?

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 table tag, with tr table rows nested into it. The first tr wraps a th or table heading, then the next sets of tr rows wrap table data or td, as many as required.

What is the HTML tag used to create tables and what purpose does it serve?

The table is used as the main wrapper for HTML tables and it helps structure the data into rows and columns.

What are table rows and why are they used?

The table row tr is used to create data in rows. They are used to group related content and display them horizontally for proper data organization.

What HTML tag is used to define the headings of tables?

The th or table head tag is used for defining table headings and they are quite different from the regular table data td as they appear bold by default and serve as labels or headings for each column.

How are table data defined and what purpose do they serve?

Table data cells or td 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.

How do you create cell borders in HTML Tables?

The border attribute is used inside the opening table tag, and its value is set to 1 and above. This helps to add visual organization to the table structure.

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?

The align attribute is used for this. Proper alignment is necessary for readability. This attribute is set in the tr table row opening tags, of the the heading.

How do expand or reduce the width of a table cell and how is this done?

The width attribute is used to define the width of a cell. This is set inside the table row tr opening tags, of the table headings th.

How do you add additional rows or columns to a table?

Additional Rows are added by adding more tr tags with nested td content, so each new row has some data. Additional columns are added by creating additional th tags nested within the tr tag of the heading section.

At a very high level, what is the organizational structure for a table in HTML?

First off, at the top of the table element tree is the table tag wrapping the entire table. This is followed by the table heading, then the table data. All the table heading th elements are nested inside a single tr tag. Then each set of table data td tags, representing the data that corresponds to the headings, are nested within tr tags as well. So, if you had 5 headings or th elements for instance, then you would equally have 5 td elements nested within each row tr element for each category of data.

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'.

<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:

<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.

<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.


<!-- 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>

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.

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

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.

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

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.


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

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.

<!-- 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>

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.

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

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"

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

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.

 <!-- 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>

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

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

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.

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

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.

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

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.

HTML 107: Forms and Buttons in HTML

Table of contents