Week 3: Demo

HTML Forms



HTML forms allow you to collect information from users for activities such as surveys, e-commerce applications, or web-apps requiring data from the user. Forms can be made of a variety of different input types for different purposes.

Basic Form Tags

In order to create a form of any kind, we need to use the <form> tags to create a form element that will act as the container for all of the input fields we want to add.

<form action="process.php" method="post"> </form>

The two attributes of the form tag are "action" and "method". The "action" attribute is for providing a server-side script that the user input will be sent to so it can be processed on the server. This is outside of the scope of the material in this course (but is exactly what is covered in ACAD 276: Dev II if you are interested), but we will be using form input through JavaScript later on in the semester. The "method" attribute has to do with the technique used to send the data to the server, which can be either "get" or "post". Again, outside of the scope of this course, so we won't dwell on their differences.

To actually create a field to allow the user to input some data, we need to use the <input> tag. The <input> tag is the most basic tag to include in forms but also incredibly versatile.



<label for="username">Username:</label>
<input type="text" name="username">

The two important attributes the input tag needs are "type" and "name". The "type" attribute allows us to specify the type of input that is expected. Valid input types include button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, and week.

"button"



<input type="button" value="Click me!">

"checkbox"





<input type="checkbox" name="vehicle1" value="Bike">
<label for="vehicle1">I have a bike</label><br>
<input type="checkbox" name="vehicle2" value="Car">
<label for="vehicle2">I have a car</label><br>
<input type="checkbox" name="vehicle3" value="Boat">
<label for="vehicle3">I have a boat</label><br>

"color"



<label for="favcolor">Select your favorite color:</label>
<input type="color" name="favcolor">

"date"



<label for="birthday">Birthday:</label>
<input type="date" name="birthday">

"datetime-local"



<label for="birthdaytime">Birthday:</label>
<input type="datetime-local" name="birthdaytime">

"email"



<label for="email">Email:</label>
<input type="email" name="email">

"file"



<label for="myfile">Upload a file:</label>
<input type="file" name="myfile">

"hidden"

There's a hidden input element here that you can't see. 

<input type="hidden" name="hiddeninput" value="hello world!">

"image"



<input type="image" src="submit.png" alt="Submit" width="150" height="50">

"month"



<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">

"number"



<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">

"password"



<label for="pwd">Password:</label>
<input type="password" name="pwd">

"radio"





<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label></pre>

"range"



<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">

"reset"



<input type="reset">

"search"



<label for="gsearch">Search Google:</label>
<input type="search" name="gsearch">

"submit"



<input type="submit">

"tel"



<label for="phone">Phone Number:</label>
<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

"time"



<label for="appt">Select a time:</label>
<input type="time" name="appt">

"url"



<label for="homepage">Add your homepage:</label>
<input type="url" name="homepage">

"week"



<label for="week">Select a week:</label>
<input type="week" name="week">


Form Elements that are not Input

"textarea"



<textarea name="story"></textarea>

"select" and "option"



<select name='favcolor'>
    <option value='red'>Red</option>
    <option value='green' selected='1'>Green</option>
    <option value='yellow'>Yellow</option>
</select>

"output"

The output element is intended to show immediate output from input fields. Adjust the range slider below to see numeric values appear to the right of it.


<input type="range" name="vol" min="0" max="50" onchange="slidedata.value=this.value">
<output name="slidedata" for="vol"></output>

"datalist"



<input list="browsers">
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

Form Object Attributes

placeholder

The placeholder property allows for a default value to be used in the input field.



<input type="text" name="email" placeholder="user@domain.com">

required

A required property will ensure that an input field is actually filled out before it can be submitted. The contemporary application of the required attribute is to simply add the word "required" as an attribute to the tag with no corresponding value.



<input type="text" name="email" required>

title

The title property is typically displayed as a "tool tip" when a user hovers over an object.



<input type="text" name="email" title="Enter a valid email address.">

pattern

The pattern property uses regular expressions to determine an alphanumeric pattern that the content needs to match in order to be submitted.



<label for="phone">Phone Number:</label>
<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

autofocus

Autofocus is a useful property for automatically highlighting an input field upon a page loading. This alleviates the step requiring a user to click into an input field before they can start typing. Consider the interaction when you visit Google and the search field already has a cursor in it.



<input type="text" name="search" autofocus placeholder="Enter search here">

Resources