Hey everybody I want to let you know that I have undertaken the grueling task of getting the heck away from WordPress. I was so sick of the problems and updates I had to do all the time. I am now using my ezbloo system and I am integrating all my old posts into the new system. It sucks, but in the end, I will save bundles of time. I needed to keep things simple and that is why I created ezbloo. I'll have more on this later for you guys after I am done with the total integration of my old posts here. So if you are looking for a post and need it faster, shoot me an email and I will make it a priority. [email protected]

HTML5 Forms Absolute Beginners Web Development lesson 7 Edit
Last Update:2024-10-16 12:05:29
The Change:2024-10-16 10:33:26


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. 
<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