Lesson 9
HTML forms are used to send data to the web server. A typical use of a form would be a customer survey. Several input fields can be used for this purpose, shown in the table below (HTML 5):
| Value | Description |
|---|---|
| button | Defines a clickable button (mostly used with a JavaScript to activate a script) |
| checkbox | Defines a checkbox |
| colorNew | Defines a color picker |
| dateNew | Defines a date control (year, month and day (no time)) |
| datetimeNew | Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second, based on UTC time zone) |
| datetime-localNew | Defines a date and time control (year, month, day, hour, minute, second, and a fraction of a second (no time zone) |
| emailNew | Defines a field for an e-mail address |
| file | Defines a file-select field and a “Browse…” button (for file uploads) |
| hidden | Defines a hidden input field |
| image | Defines an image as the submit button |
| monthNew | Defines a month and year control (no time zone) |
| numberNew | Defines a field for entering a number |
| password | Defines a password field (characters are masked) |
| radio | Defines a radio button |
| rangeNew | Defines a control for entering a number whose exact value is not important (like a slider control) |
| reset | Defines a reset button (resets all form values to default values) |
| searchNew | Defines a text field for entering a search string |
| submit | Defines a submit button |
| telNew | Defines a field for entering a telephone number |
| text | Default. Defines a single-line text field (default width is 20 characters) |
| timeNew | Defines a control for entering a time (no time zone) |
| urlNew | Defines a field for entering a URL |
| weekNew | Defines a week and year control (no time zone) |
Source: https://www.w3schools.com
When creating a form, you use the <form>tag. The input elements are enclosed between the <form></form> tags.
Build a Form
- Double click the icon on your desktop to open ‘Notepad++’
- Click ‘File’ & ‘Close’ to close any files that appear. You should now see a blank document.
- Type the following code:
<!doctype html>
<html>
<head>
<title>Lesson 8 </title>
<head>
<body>
<form name="simpleform" action="lesson 1.html" method="post">
Name :<input type="text" name="first name" size="10"> <br/>
Address :<input type="text" name="first name" size="20"><br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
- Save your file and from the ‘Run’ menu choose ‘Launch in IE’. You should now see this:
You will notice from your code that in your form tag we use the ‘name’ attribute, this has a value of ‘simpleform’ that uniquely identifies your form on the page. Also, we use the ‘action’ attribute to process the data on submission.
Please note HTML does not process the data, a scripting language like PHP, or asp would be used to process the data. For this exercise, we are redirecting the page to a non-existent page called ‘lesson 1.html. The ‘method’ attribute suggests how the data is processed.
Take me to the next lesson 'Input Types'