HTML Forms

HTML Forms are tags used to allow user input to be collected from visitors of a web page, e.g. first name, age, gender, city, literally anything. User input can be collected in a great many different ways. Below are the major ways (formats):

  • Text box - alphanumeric input, e.g. anything (a b c 1 2 3 & *)
  • Textarea - multi-line text box
  • Number box - numeric values
  • Email address - input has to resemble an email address format
  • Password box - input shows up hidden as astericks
  • Date - year, month and day (no time)
  • Month - month and year
  • Week - week and year
  • Time - time
  • Range - range control / slider
  • Tel - for telephone numbers
  • Drop down list - chose one item from list
  • Radio button - mutually-exclusive (no more than one can be chosen) radio (circle) buttons
  • Check boxes - boxes where more than one can be checked
  • Color box / picker - allows a color to be chosen from color palette
  • File upload - allows access to client file system to upload file
  • URL - web site address
  • Hidden - input box that does not appear on the web page
  • Search - used for search fields - behaves like a regular text field
  • Submit button - used to submit the form and its data for processing
  • Button - a button that can be used for any purpose
  • Image button - a file made from an image
  • Reset button - used to allow the user to clear the contents of the form

Example: Basic HTML Input Form - contains a number box and submit button

An HTML input form must have be enclosed inside an opening and closing form tag in order for fields and data inside it to be sent to another page for processing. The opening form tag contains several important attributes:

  • action attribute - indicates the web page that is called when the user clicks the Submit button. When the submit button is clicked, this HTML input form will sent the data in the f number box to a PHP pages named temp2.php
  • method attribute - indicates how the data is sent. The value of this attribute can be either post or get. post hides the data being sent to the next page. get places the data being sent to the next page in the URL/web address. get should be used for search results that may benefit from being emailed or bookmarked/saved. post should be used for pages sending private information, e.g. social security number, credit card number, passwords, etc.

	<form action="temp2.php" method="post">		
		<p>Enter a fahrenheit temperature:  <input type="number" name="f" min="-200" max="5000"></p>
		<p><input type="submit" value="Submit"></p>		
	</form>
	

Run it now

In the example above, f is a field, in this case a field that the user must enter numeric input. It should be noted that the types of fields that will work in a web browser depends on the web browser. That is, some fields such as number were released in certain HTML versions. Number was released in HTML 5. Thus, if the user/visitor is using a older browser that does not support HTML 5, the field may not show up or work correctly.

Each field type will have its own unique attributes. In the example above, a min and max attribute are being used to specify the min and max numeric value the user will be allowed to enter into the box. If the user tries to enter a value outside this range, the form will not submit. This is a method of input validation.


Example: HTML Contact Me Form


	<form action="contact.php">

		<p><label for="fname">First Name</label><br>
		<input type="text" id="fname" name="firstname" placeholder="Enter your first name" maxlength="30"></p>

		<p><label for="lname">Last Name</label><br>
		<input type="text" id="lname" name="lastname" placeholder="Enter your last name"  maxlength="30"></p>

		<p><label for="country">Country</label><br>
		<select name="country">
		  <option value="usa">USA</option>
		  <option value="canada">Canada</option>
		  <option value="mexico">Mexico</option>
		</select></p>

		<p><label for="message">Message</label><br>
		<textarea name="message" placeholder="Type your message here" style="height:100px; width: 400px;"><<</textarea></p>

		<p><input type="submit" value="Submit"></p>

	</form>
	

Run it now