HTML Input Forms
A HTML form is used to enter and input data. For example, you may have come across a school application form, membership forms and many other paper forms. A HTML form is an interactive way of entering data. There many features of forms that you may have come across on the Web. Some of these features are Text Boxes, Drop Down Lists and Radio Buttons which both allow you to choose from options.

Example - Getting Started with Forms
<form>
      <!--Contents Inside Form such as Form elements -->
</form>
HTML <form> element starts a form and </form> element ends a form

Tips:
The Element “<!--“ starts a comment and “-->” ends a comment. This allows you to add notations to help you explain your code. A cool feature off this element is that it is not shown on the outputted Webpage.

Input Form Elements and Types
The <input> Element allows you to create an input field. It must be placed inside the <form> tags.

Text Box
To create a text box an attribute called type is equal to “text”. An attribute helps provide information about an HTML Element. There are many different attributes for certain HTML elements. To find out more information, why not visit the website w3schools.com
For HTML attributes use this link Click Here
For Form Input attributes use this link Click Here!
<input type="text" name="username">
What this Shows on the Webpage


Attribute name is used so the text box can be referenced easily and so it can describe the job of the <input> Element easily. It is also used as a reference to get data inputted.

Radio Button
Radio button allows you to select one option from the radio buttons with the same name attribute.
<input type="radio" name="radio_choice" value=”Boy”> Boy
<input type="radio" name="radio_choice" value=”Girl”> Girl
What this Shows on the Webpage
Boy Girl

The attribute value assigns a value to the selected radio button when form is submitted.

Checkbox
Checkbox allows you to select zero or more options.
<input type="checkbox" name="check_box_choice" value=”walk”> I walk to School
<input type="checkbox" name="check_box_choice" value=”bus”> I take the bus to School
What this Shows on the Webpage
I walk to School I take the bus to School


Password
<input type="password" name="password">
What this Shows on the Webpage



Submit Button
The submit button allows you to submit a form.
<input type="submit" name="submit_button">
What this Shows on the Webpage


There many other input types or methods, have a look at this website for more information Click Here to Visit Website!

Why not have a GO?
Exercise:
1) Create a HTML Register Form for a website. The form should collect the following: Name, Surname, Date of Birth, Address, Telephone Number, Email address and Password. Hint: Research different types for inputting Date of Birth, Telephone Number and Email Address. If you had read the above explanation on Input Forms and Elements, then you’ll find a useful clue.



← Go back to Index Page Click Here!

Back to the Intro Page