1 Star2 Stars3 Stars4 Stars5 Stars (12 votes, average: 5.00 out of 5)

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.

Tip: Click on images to make them larger. If you find anything wrong on this page or need further assistance please comment below or contact me. 🙂

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.

Subscribe To My YouTube Channel:
<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="[email protected]" 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: June 19th, 2017 by Maximus Mccullough

Please like, share and subscribe.

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

Cool People Share:
HTML5 Forms Absolute Beginners Web Development lesson 7

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.