HTML5 Forms Absolute Beginners Web Development lesson 7

We will be covering HTML5 forms in this lesson. In your web development career you will use forms a lot. It is a good idea to get use to what is available to you. It is important to note that we are covering creating forms. Processing forms in PHP will be coming in the future.

Form Tag

Just like everything on a web page we use a tag to create forms. The form tag looks like this.

<form></form>

Input Types

There are several different types of input types in forms. You will create an input type like this.

Only cool people share!

<input type="" />

Inside the double quotes you can use these different types.

text accepts text or numbers
number numbers only
tel bring up telephone dialer on mobile devices
url for web address
email for email addresses
color for a color picker
date for the date
time for the time
week for the weeks of the year
month for the months of the year
submit to submit a form
radio to select choices
search just like “text” above
reset to reset a form to default values
checkbox to create check-boxes.

Select Drop Downs

The select option is a little different coding syntax. Here is an example.

<select id="pick" name="pick">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>

Textarea Inputs

To create a box for a user to write in you will use a textarea tag. Here is an example.

<textarea id="comment" name="comment" placheolder="Enter Comments Here"></textarea>

Attributes For Form Items

There are many attributes that you can give your form inputs. Here are several attributes that you can use.

readonly
disabled
size=””
maxlength=””
autocomplete=”on”
autocomplete=”off”
autofocus
pattern=”[A-Za-z]{3}”
required
checked for auto checking radio buttons or check-boxes

Code for Today’s Lesson

<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<h1>HTML Forms</h1>
<h2>Input Type Text</h2>
<form>
<label>Enter Your Name</label><br/>
<input type="text" id="fullname" name="fullname" placeholder="Enter Your Full Name" maxlength="10" required/>
<input type="submit" id="submit" name="submit" value="Submit Name"/>
</form>
<h2>Input Type Numbers</h2>
<form>
<label>Enter Your Age</label><br/>
<input type="number" id="age" name="age" placeholder="Enter Your Age" />
<input type="number" id="quantity" name="quantity" min="1" max="5">
<input type="number" id="points" name="points" min="0" max="100" step="10" value="30">
<input type="submit" id="submit2" name="submit2" value="Submit Name"/>
</form>

<h2>Input Type URL</h2>
<form>
<label>Enter Your Website Address</label><br/>
<input type="url" id="homepage" name="homepage" placeholder="Enter Website">
<input type="submit" id="submit3" name="submit3" value="Submit Name"/>
</form>

<h2>Input Type Search</h2>
<form>
<label>Search This</label><br/>
<input type="search" id="search" name="search" placeholder="enter keyword">
<input type="submit" id="submit4" name="submit4" value="Submit Name"/>
</form>

<h2>Input Type Phone</h2>
<form>
<label>Phone Input Type</label><br/>
<input type="tel" id="phone" name="phone" placeholder="enter phone #">
<input type="submit" id="submit5" name="submit5" value="Submit Name"/>
</form>

<h2>Input Type Date and Times</h2>
<form>
<label>Date Time Input Type</label><br/>
<input type="date" id="date" name="date" required/><br/>
<input type="week" id="week" name="week" /><br/>
<input type="month" id="month" name="month" /><br/>
<input type="time" id="time" name="time"/>
<input type="submit" id="submit6" name="submit6" value="Submit Date"/>
</form>

<h2>Input Type Radio</h2>
<form>
<label><input type="radio" id="sex" name="sex" value="Male" checked/>Male</label><br/>
<label><input type="radio" id="sex" name="sex" value="Female"/>Female</label><br/>
<br/>
<input type="submit" id="submit7" name="submit7" value="Submit Date"/>
</form>

<h2>Input Type Email</h2>
<form>
<label>Enter Email</label><br/>
<input type="email" id="em" name="em" value="max@a1websitepro.com" size="77" disabled/>
<br/>
<input type="submit" id="submit8" name="submit8" value="Submit Email"/>
</form>

<h2>Input Type Color</h2>
<form>
<label>Pick Color</label><br/>
<input type="color" id="color" name="color" placeholder="Pick Color"/>
<br/>
<input type="submit" id="submit9" name="submit9" value="Submit Color"/>
</form>

<h2>Drop Downs</h2>
<form>
<label>Pick One</label><br/>
<select id="pick" name="pick">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<br/>
<input type="submit" id="submit9" name="submit9" value="Submit Color"/>
</form>

<h2>Textarea Box</h2>
<form>
<label>Enter Text</label><br/>
<textarea id="comment" name="comment" placheolder="Enter Comments Here"></textarea>
<br/>
<input type="submit" id="submit9" name="submit9" value="Submit Comments"/>
</form>

<br/><br/><br/><br/>
</body>
</html>

Lesson #8

HTML5 Forms Absolute Beginners Web Development lesson 7 was last modified: October 29th, 2021 by Maximus Mccullough

Summary

Article Name

HTML5 Forms Absolute Beginners Web Development lesson 7

Description

Author

Maximus McCullough

Publisher

A1WEBSITEPRO LLC

Logo