HTML Tutorials - Color Codes
In Html most of the elements are used mostly for display purposes, however with forms and input you can add interactivity your web site.
HTML forms can be used handle very important operations on your site i.e. Registration / Login / Take Orders / Surveys and much more.
A form will take input from the user and you can store this information in a database / file.
Forms in html start with the <form> tag, this tag tells the browser where to send the information, then they have a few input fields, then a usually a submit button and a reset button.
A form is defined with the <form> tag.
<form> . input elements . </form> |
Here is an example use of the <form> tag:
<form action="http://www.beginner-tutorials.com/login.php?username=fergal&password=pass1234" method="post"> |
This code will not show up in the web page, it's invisible.
It is the "input types" that you put in your code that create the visible part of your HTML form.
The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.
The Form’s method sends the data without displaying any of the information to the visitor, there are two types
post – sends information
get – receives the information
form - tells the browser that the next section of the web page will be a form
HTML Forms Input:
The most used form tag is the <input> tag. The type of input is specified with the type attribute.
The most common inputs are
(1)Text Fields (2) Check Boxes (3) Radio Buttons
Text Fields:
The basic syntax of the text field is :
<INPUT TYPE="TEXT" NAME="username"> |
TYPE="TEXT" – This tells the browser that a single line text input box should be created.
NAME="username" - sets the name of the text field. This name will be used at the server
side to identify this input item.
VALUE="default value" – usually left blank so the user can enter a value here
Example:
<form action="http://www.beginner-tutorials.com/login.php?username=$username&password=$password" method="post"> <INPUT TYPE="TEXT" NAME="username"> </form> |
Here is how the above code would look like in a browser
Check Boxes
Checkboxes are used when you want the user to select one or more options of a limited number of choices.
<form> Which fruit do you like most:<br /><br /> Apple: <input type="checkbox" name="fruit" value="Apple" /> <br /> Orange: <input type="checkbox" name="fruit" value="Orange" /> <br /> Banana: <input type="checkbox" name="fruit" value="Banana" /> </form> |
How it looks in a browser:
Radio Buttons:
Radio Buttons are used when you want the user to select one choice or another.
<form> <input type="radio" name="sex" value="male" /> Male <br /> <input type="radio" name="sex" value="female" /> Female </form> |
How it looks in a browser:
Male
Female
Note that only one option can be chosen.
In html forms the submit button is the most important, when you click this button all information is gathered from your form i.e. username, password, sex, fruit you like etc.
This is information is then posted to the url specified in the form action. In our example below the username and password are sent to the server side php page with details of the username and password you submitted.
This information is abstracted using php code and tested against user and passwords set in your database.
Example:
<form action="http://www.beginner-tutorials.com/login.php?username=$username&password=$password" method="post"> Username :<INPUT TYPE="TEXT" NAME="username"><br> Password: <INPUT TYPE="TEXT" NAME="password"><br> <input type="submit" value="Send"> </form> |
How it looks in a browser:
 |