Welcome to Silicon Overdrive!

Linkedin Youtube

Welcome to Silicon Overdrive!

HTML Series: How to create a basic HTML form

Overview

Would you like to know how to help users get in touch with you on your website without displaying your contact info where bots can find it and spam your email? A simple solution is to add a contact form to your site to allow users to send you a message without sharing your email with everyone on the Internet.

Follow our tips below to learn how to create a basic form in HTML and see how you can make use of PHP or JavaScript to make it functional.

Is a Form Necessary?

Yes. A form is a great way to get to know the users visiting your site.

With a form, you are able to build a database to be able to send newsletters about campaigns or new content, advertise discounts, new products, new services, etc. the possibilities almost seem endless with forms.

Form Elements

Here’s a few basic elements that are used in forms:

The basic element to create a form in HTML is the < form > tag. This tag includes other elements such as < input >, < textarea >, < button >, < label >, etc.

HTML Structure:

< form action=”/example.php” method=”get” >
      < label for=”fname” >First Name:</ label >
      < input type=”text” id=”fname” name=”fname” >
      < input type=”submit” value=”Submit” >
</ form >

HTML form tag

The above code will submit the user’s First Name (fname) and send it to the php file on the server called example.php.

The < input > tag specifies the input field where users are able to add their information.

HTML Structure:

< form action=”/example.php” method=”get” >
       < label for=”fname”>First Name:</ label >
       < input type=”text” id=”fname” name=”fname” >
       < input type=”submit” value=”Submit” >
</ form >

HTML form input tag

Input Types

There are various types of input for input elements that allows users to input data other than simple text:

  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • week
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text – This is the default value
  • time
  • url

The < select > tag is a useful tag if you want to add a drop-down list to your form, allowing users to choose from a range of options.

HTML Structure:

< label for=”services” >Choose a Service:</ label >

< select name=”service” id=”service” >
       < option value=”it-services” >IT Services & Support</ option >
       < option value=”aws” >Amazon Web Services</ option >
       < option value=”awsdevops” >Amazon Web Services DevOps</ option >
       < option value=”microsoft” >Microsoft 365</ option >
       < option value=”seo” >SEO & Digital Marketing</ option >
</ select >
< input type=”submit” value=”Submit” >

HTML select tag

Multiple Sections

By using the “multiple” attribute, users are able to select more than one option.

HTML Structure:

< label for=”services” >Choose a Service:</ label >

< select name=”service” id=”service” multiple >
< option value=”it-services” >IT Services & Support</ option >
< option value=”aws” >Amazon Web Services</ option >
< option value=”awsdevops” >Amazon Web Services DevOps</ option >
< option value=”microsoft” >Microsoft 365</ option >
< option value=”seo” >SEO & Digital Marketing</ option >
</ select >

Other select attributes include autofocus, disabled, form, multiple, name, required, and size.