Collect Data using Forms and Inputs

Collect Data using Forms and Inputs
siteground placeholder image

Forms

When you want to collect data from your users, forms in HTML are a great way to accomplish that.

The surrounding tag for forms is the form tag. In addition, it will require two attributes, the action attribute and the method attribute.

Action

The action attribute is simply the location that the information from the form is being sent to. The value of this attribute will therefore be a URL of some kind.

Method

The method attribute defines how the form is going to send the information. The two most used values for this attribute is get and post.

If you try doing a Google search, and look at the URL at the top afterwards, you will see the text you typed before hitting search. This is an example of get. Using get will make the data inputted in a form get appended to the end of the URL.

On the other hand, using post will still send the data like get, but the only main difference is that you will not see it in the URL. Using post is recommended for submissions that require heightened security like passwords and personal information.

Put it all together, and you get this form:

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Forms</title>
		</head>
		<body>
			<form action="destination" method="get">
			</form>
		</body>
	</html>
	

While that is a completely valid form, without any way for the user to input or submit data, it is essentially useless on its own. We'll explore the many ways in which you can collect data from the user.

Textarea

Textareas are essentially boxes where you can input text. They support multiple lines of text with optional attributes to control the size of them, the rows and cols attributes.

	
	<textarea rows="8" cols="64">This is the initial value.</textarea>
	
Textareas are boxes of text.
Textareas are boxes of text.
bluehost placeholder image

Select

You know those dropdowns you see when selecting the country you live in? Those are created using select.

The select tag is the outermost tag, and inside you can define the options to choose from, using the option tag. Let's look at an example:

	
	<p>Favorite color?</p>
	<select>
	    <option>Red</option>
	    <option>Blue</option>
	    <option>Green</option>
	</select>
	
Select with 3 options.
Select with 3 options.

If you would like an option to be selected by default, you can add a value-less selected attribute.

For example, if you wanted Blue to be pre-selected, you would do this:

	
	<p>Favorite color?</p>
	<select>
	    <option>Red</option>
	    <option selected>Blue</option>
	    <option>Green</option>
	</select>
	

Option Groups

If your options feel better if they were grouped together, you can use the optgroup tag, with its accompanying label attribute. Here's a simple example of it:

	
	<p>Favorite color?</p>
	<select>
		<optgroup label="Dark Colors">
			<option>Brown</option>
			<option>Black</option>
			<option>Purple</option>
		</optgroup>
		<optgroup label="Light Colors">
			<option>Yellow</option>
			<option>White</option>
			<option>Pink</option>
		</optgroup>
	</select>
	
Option groups can be useful.
Option groups can be useful.

Input

This tag was left for last because it is arguably the most used tag with forms. The input tag can turn into many different things due to its versatile type attribute. Since this tag doesn't surround any content, it does not require a closing tag.

Let's go through all of the main types.

Text

When type is set to text, it will be a single-line textfield. Pretty basic.

	
	<input type="text">
	

Password

When type is set to password, it functions the same as if type is set to text, except that any text inputted will be visually overridden by dots or stars as you would expect when entering a password.

	
	<input type="password">
	

Checkbox

When type is set to checkbox, it becomes a checkbox that has two states. A checkbox can either be checked and not checked. You have the option to give this a value-less checked attribute, which will set the initial state of the checkbox to be checked.

	
	<input type="checkbox">
	

Radio

When type is set to radio, it turns it into a radio button, which is similar to a checkbox except that only one option can be selected in a group of them.

	
	<input type="radio">
	

Number

When type is set to number, it turns into a single-line input field where you can select a number. You have optional min and max attributes to constrain the value to a certain range.

	
	<input type="number" min="1" max="10">
	

Submit

When type is set to submit, it becomes a button that, when clicked, submits the form to the destination defined in the action attribute. The optional value attribute defines the text displayed on the button.

	
	<input type="submit" value="Submit this Form">
	
There are many more input types.
There are many more input types.

Button

The last input type in the list above was submit, which is the button the user presses to submit the form. However, there is another way to make a generic button that can do whatever you want (sometimes requiring a little JavaScript).

For example, with the button tag, you can easily make a button the resets the form to its initial values by giving it a type attribute with the value of reset.

	
	<form action="/destination" method="get">
		 <button type="reset">Reset Form</button>
	</form>
	

In general though, you can just make a generic button like this:

	
	<button type="button">I currently do nothing!</button>
	
An HTML button that does nothing.
An HTML button that does nothing.

If you gave the button an onClick attribute, it will run JavaScript once pressed.

	
	<button type="button" onclick="doSomething();">I currently do something!</button>
	

In this case, it will run a function called doSomething()

udemy2 placeholder image

Required

Required is a pretty cool attribute you can add to any of the aforementioned tags that will make giving it a value required for form submission.

For example, if you tried to submit the following form:

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Forms</title>
		</head>
		<body>
			<form action="/destination" method="get">
				<input type="text" required>
				<input type="submit" value="Submit this Form">
			</form>
		</body>
	</html>
	

Without giving it a value, the browser will automatically prevent all submission attempts until the user inputs something in the tags given the required attribute.

This is useful for things like account registration where you need a username/email and password to proceed.

You need to enter a value for required inputs.
You need to enter a value for required inputs.

Labels

When it comes time to submit the data, there is one last attribute that I left out but is actually needed on all tags where you are collecting data, and that is the name attribute.

It's not complicated at all, it is just giving a name to the piece of data. It is as simple as this:

	
	<input type="text" name="username">
	

Or this:

	
	<input type="password" name="password">
	

After you have given the tags name attributes, it is also good practice to give them visible labels, using the label tag.

Using our above examples, using label can look like this:

	
	<label for="username">Please enter your username:</label>
	<input type="text" name="username">
	
	
	<label for="password">Please enter your password:</label>
	<input type="password" name="password">
	
They help the user tremendously.
They help the user tremendously.

Field sets and legends

What about the case where giving labels to every individual tag doesn't make sense, and instead you want to give a single label to a group of them?

Well you can do this with field sets and legends, using the fieldset tag to group them, and the legend tag to label it.

	
	<fieldset>
		<legend>Name</legend>
		<label for="first">First Name:</label>
		<input type="text" name="first">
		<label for="last">Last Name:</label>
		<input type="text" name="last">
	</fieldset>
	
Example of field sets and legends.
Example of field sets and legends.
1and1 placeholder image

Submitting

Actually submitting the data you have collected and working with it is a story for another day, or in this case, another class.

Fear not though, this information is still very useful and important to know!