Work with html forms

HTML Forms

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

  1. Double click the icon on your desktop to open ‘Notepad++’
  2. Click ‘File’ & ‘Close’ to close any files that appear. You should now see a blank document.
  3. 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>

  1. Save your file and from the ‘Run’ menu choose ‘Launch in IE’. You should now see this:
A simple form
A simple form.

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'

Scroll to Top