COMP 1589
Introduction to HTML forms
Matt Prichard
HTML Forms
Forms are a way of collecting information or data from our site visitors.
How do they work?
• We place data-entry fields or controls on the Web page such as
text boxes, check boxes and submit buttons.
• The site visitor fills in the fields and clicks a submit button.
• The data the user enters is sent over the Internet to our server.
• The server, through a server-side scripting language, takes action
on and processes the data.
Creating the form
• A form is an invisible element that contains the form
controls.
• Form controls are the fields or elements that allow the user
to enter information (like text fields, drop-down menus,
radio buttons, checkboxes, etc.)
• A form is defined with the <form> </form> tags.
• All other controls must be nested within these tags.
Input element
• The most general type of control is the INPUT element.
• The type of INPUT is specified with the typeattribute.
• <input type="text"/>
• Notice this is a self-closing html tag. This creates an empty text
box on the screen.
• <input type="text" name="firstname" size="30"/>
• This creates an empty text box 30 characters wide and its name is
“firstname” for processing purposes later.
Test Area
<textarea name="message" rows="5" cols="30">
</textarea>
This creates a text area with scrollbars which allow the user to enter
large amounts of text.
Again, we have named it something sensible and set its size to 5 rows
high and 30 characters wide. If the user enters more than 5 lines of
text, the scrollbars become active.
Notice this element requires a closing tag.
Buttons
There are two types of pre-defined button; a submit button that sends
the form to the server for processing and a reset button that clears or
empties the form.
<input type="submit" value="submit"/>
This creates a submit button, the value is what is written on the
button.
<input type="reset" value="clear"/>
This creates a reset button, the value is what is written on the button.
Basic form code
The result in a browser – ugly but functional
Quick list of most common controls
What will be displayed Control to use
Text Text entry field, size defined with size <input type=“text”
attribute. name=“text1” size=“25”/>
Text area A large text area field, size defined by <textarea name=“” rows=“8”
rows and cols attributes. cols=“25”></textarea>
Password Text entry field, characters appear as <inputtype=“password”
dots or asterisks. name=“pass1”/>
Check box Unchecked check box, unless checked <input type=“checkbox”
attribute is present name=“box1” value=“yes”/>
Radio button Unchecked radio button, unless checked <input type=“radio”
attribute is present name=“set1” value=“first”/>
DropMdown list DropMdown list of choices <select name=“drop1” option
value=“first”/>
Button Submit form or resetform <inputtype=“submit”/>
<inputtype=“reset”/>
Common controls as they appear
Other controls
Other attributes that form elements can have;
• Maxlength=“11” this restricts the amount of characters that can be
entered into a text box.
• Id=“someid” id, again can be accessed by JavaScript and CSS for
styling individual form elements.
• Tabindex=“1” for selecting form elements when the tab button is
pressed.
• checked=“checked” for preselecting radio and check boxes.
Other controls
Other attributes that form elements can have;
• Maxlength=“11” this restricts the amount of characters that can be
entered into a text box.
• Id=“someid” id, again can be accessed by JavaScript and CSS for
styling individual form elements.
• Tabindex=“1” for selecting form elements when the tab button is
pressed.
• checked=“checked” for preselecting radio and check boxes.
Forms with CSS
The CSS
Look at these tutorials
https://www.w3schools.com/html/html_forms.asp
https://www.w3schools.com/css/css_form.asp
?
