Lesson 18: Forms

In this lesson, you will learn how to make a form.

What is a form?

A form is a piece of web page that lets users enter their own information, like name and address. You would add a form when you want your readers to send you information.

Building a simple form

We are going to build a simple form that asks for someone to input their name and country. When they click "Submit" they get a response that says thank you.

We'll actually build two pages: one that has the form and another one that shows the message.

So get started by creating two new pages, name them and save them to the same folder.

Forms page: form.htm

	
	  
	<body>

	  <!--this is where your form will go--> 	

	</body>

Output page: output.htm

	
	
	<body>

	  <p>Thanks for your submission!</p>

	</body>

In your forms page, add the <form> element to your body.

Form element

	
	<form action="output.htm" method="get"> 	   

	</form>

In the action attribute, type in the name of your second file: your output page. The method attribute can be either get or post, but for our purposes, get is the easiest to use.

Let's add some content to our form. We're going to add two text fields that people can type in and a submit button that they click.

	
	<form action="output.htm" method="get">

	  Name: <input type="text" name="name"><br>
	  Country: <input type="text" name="countries"><br> 	
	  <input type="submit" value="Submit"> 
	  

	</form>

When viewed from a browser, the results should look like this:

Name:
Country:

Try it out! Type in your name and country and click submit. You should get a new window or tab with the message that you put in your output page. After you click submit, notice that the URL address now includes the information you entered in the fields.

Congratulations, you've just created your very first form.

Getting fancy

Say you wanted someone to only have to type in the first few letters of their country instead of having to type in the whole thing. This is what we call an "autocomplete" feature.

Let's do that using a <datalist> element. First, add list attribute to your country input, then add the <datalist> with the same name as its ID (this is what connects them). Each line inside the datalist as its own option, showing the countries you want them to get prompted with.

Form with autocomplete

	
	<form action="output.htm" method="get">

	  Name: <input type="text" name="name"><br>
	  Country: <input type="text" list="country" name="countries">
	   <datalist id="country">
	    <option value="UK">
	    <option value="Canada">
	    <option value="USA">
	    <option value="India">
	    <option value="Brasil">
	  </datalist>
	  <br>
	  <input type="submit" value="Submit">

	</form>

Save the file and try it out. Start typing USA and see what you get prompted with.

If you want to use radio buttons or checkboxes, you just change the input type from "text" to "checkbox" or "radio". Below is an example where we've added radio buttons with the second one selected by default using the checked="checked" attribute.

Form with radio buttons

	
	<form action="output.htm" method="get">

	  Name: <input type="text" name="name"><br>
	  Country: <input type="text" list="country" name="countries"> 	
	  <datalist id="country">   		
	    <option value="UK">   		
	    <option value="Canada">   		
	    <option value="USA">   		
	    <option value="India">   		
	    <option value="Brasil"> 	
	  </datalist><br> 	
	  Sex: <br>  	
	  <input type="radio" name="sex" value="Male"> Male<br>  	
	  <input type="radio" name="sex" value="Female" checked="checked"> Female<br>   	
	  <input type="submit" value="Submit"> 

	</form>

Let's also add a comments area, where people can leave you feedback. Add that in right before the submit button.

	
	<textarea rows="4" cols="50">Leave us some comments 
	so we can improve this site!</textarea>

Try it out and play around with all the possibilities. Forms can get really complex and you can do all sorts of things, like make sure that a telephone is a telephone number or that the date has the correct format. For now, just play around with the basics and get familiar with all your options.

  • Drop-down menu: The reader gets to choose from a list of options.

Dropdown

	
	<select id = "myList">
	  <option value = "1">one</option>
	  <option value = "2">two</option>
	  <option value = "3">three</option>
	  <option value = "4">four</option>
	</select>
  • Password: Reader enters their password in a text box and the text gets automatically converted to symbols.

Password

		
		Password: <input type="password">
  • Hidden fields: A field that isn't visible to readers, but can be used to pass information. 
		
		<input type="hidden">
  • Cancel/reset button: Clears the form of all data. The value can be any text you want.
		
		<input type="reset" value="Cancel">
Related topics in the RepliesViews
No related topics yet

+ Post a new topic

<< Lesson 17: Invisible Things: Scripts, Metadata, Viewports, and Comments

Lesson 19: APIs >>