April 26, 2015

Extra: Chris shows us how to make a form

Today, we are going to build a basic form using HTML.


HTML forms are designed to collect user input. Then this information can be transmitted to a server and processed.

The <form> tag defines an HTML form. To close this form section, simply include a </form> tag.

What goes in between the tags depends on the type of user input you are looking for.

The most basic type is the text box.


To create a text box, simply type:
<input type="text" name="textBoxName" value="The words displayed within the textbox">  

type: will tell the browser what type of form data we are collecting. In this case it is "text".

name: gives a name to the field. The name is used to identify the field on the server side.

value: displays pre-defined text within the textbox to prompt the user to type a specific type of input.


Next, we have radio buttons

Radio buttons let a user select ONE of a limited number of choices:

Chocolate
Vanilla
Strawberry

To create a radio button, simply type:
<input type="radio" name="radioName" value="radioValue"> Label

The type, name, and value all correspond to the form the same way as the text box did.

Another type of form input is the checkbox


Option 1
Option 2
Option3

A checkbox is a boolean attribute, which means it is either true or false. You can use a checkbox instead of radio buttons when the user can choose multiple simultaneous options.

To create checkboxes, simply type:

<input type="checkbox" name="checkbox" value="checkbox"> Option 1

The Submit Button



After entering the data, the user presses the submit button which triggers the browser to send the data to the server. You can add a submit button to the form using the ‘submit’ input type.

<input type="submit" name="submit" value="Submit" />

name: There can be more than one submit button on a form. On the server side, the submit button which was pressed can be identified using the ‘name’ attribute.

value: The string given in the ‘value’ attribute is displayed as the label of the Submit button.

See how simple that was?

Now you are able to collect information via client-side HTML and transmit this data to a server for processing. It may seem very basic, but forms are what make this internet so powerful. It turns the internet from into a conversation in which the server is able to respond to users based upon their input.