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

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.