Posts tagged Web Design

One day while browsing the web you stumble upon a quiz on some website and you decide to take it. Whilst taking this quiz you encounter text fields, radio buttons, check boxes, and password fields. You begin to wonder how these are made. Well, you’re in luck because today we’re going to talk about HTML Forms and Input.

Forms

The form area is where we would put our elements such as radio buttons, textboxes, and checkboxes. This is defined by the <form> The syntax is as follows:

<form>
     <!--input elements-->
</form>

Input

The input element is where we actually get the textboxes and radio buttons. This element will take multiple attributes that will define the type of input we want.

Text

Text fields are fields where we type in things such as email addresses, phone numbers, and names. They will look something like the following:

The HTML code for this is the following:

<form>
Email Address: <input type="text" name="email" />
<br />
First Name: <input type="text" name="firstname" />
<br />
Last Name: <input type="text" name="lastname" />
</form>

This is useful for contact forms or customer surveys.

Radio Buttons

Radio buttons derive from the original radio buttons. In the olden days you could only have one button pushed in at a time, if you pressed another button then the existing button would pop out and become deactivated. Like these traditional radio buttons, the HTML radio buttons will only allow one selection at a time.

A more commonplace example would be as if you’re filling out a form and it asks you to print your last name and to fill in a bubble below your printed name. You can only fill in one bubble per space.

They look like the following:

Notice that we added another attribute to the input element. This is called the value and is used for a default value. Notice how we can only select one item at a time.
The corresponding HTML looks like the following:

<p>Please select your gender:</p>
<form>
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female
<input type="radio" name="sex" value="decline" /> Decline to state
</form>

Checkboxes

Checkboxes are used when we want the user to be able to select multiple options. A common example is if you’re applying for a job and they ask you “select/check all that apply”.

Notice that we can select multiple item at once.

The corresponding HTML is the following:

<form>
<input type="checkbox" name="survey" value="friend" /> Friend
<input type="checkbox" name="survey" value="former employer" /> Former Employer
<input type="checkbox" name="survey" value="website" /> Website
<input type="checkbox" name="survey" value="other" /> Other
</form>

Creating a drop down menu

Creating a drop down menu is yet another method for giving users the ability to select an answer or multiple answers if you want. It will look like the following:

The HTML will look like the following:

<form>
     <select name="bikes">
          <option value="tricycle">Tricycle</option>
          <option value="street-bike">Street Bike</option>
          <option value="mtn-bike">Mountain Bike</option>
          <option value="motorbike">Motorbike</option>
     </select>
</form>

Creating a simple text area

With the addition of a text area, this allows the user to write a message on a contact form or allows them to write additional comments on a survey on any given question. It will look like this in your browser:

Type your message here…

The HTML will look like the following:

<textarea rows="10" cols="30">
Type your message here...
</textarea>

In most modern browsers, it’ll allow you to extend the size of the text area at your own discretion.

Creating a Submit Button

Creating a submit button is essential to the form as a whole. Although this button would technically anything, “Submit” is the most common. It will look like the this in your browser:

The HTML will look like this:

<form>
<input type="button" value="Submit" />
<input type="button" value="Good Morning!" />
</form>

Any value that you have in the value attribute will reflect upon the button.

Creating a fieldset around data

You might be wondering what in the world fieldset is to being with. A <fieldset> element is a border that surrounds some or all fields in a form. You can also have a legend element within each fieldset to denote the title of the fieldset.

<form>
<fieldset>
<legend>Name</legend>
First Name <input type="text">
Last Name <input type="text">
</fieldset>
<fieldset>
<legend>Address</legend>
Street Address <input type="test"><br />
City: <input type="text">
State: <input type="state" size="2">
Zip: <input type="zip" size="5">
</fieldset>
</form>

If you want to see this code in action then click on the green download button.

form.zip
Size: 3.41 KB