Scribd
Upload
2 views

HTML Forms Tutorial

The document provides a comprehensive guide on mastering HTML forms, covering the basic structure, various input types, attributes, and validation techniques. It includes examples of complete forms and best practices for accessibility and usability. Additionally, it offers exercises for practical application and resources for further learning.

Uploaded by

odhiambojoseph281
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

HTML Forms Tutorial

The document provides a comprehensive guide on mastering HTML forms, covering the basic structure, various input types, attributes, and validation techniques. It includes examples of complete forms and best practices for accessibility and usability. Additionally, it offers exercises for practical application and resources for further learning.

Uploaded by

odhiambojoseph281
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 26

Mastering

HTML Forms –
Step-by-Step
From Basics to Complete Forms

By: Joseph Odhiambo


A form collects user data.

Usually sent to a server for


processing.
What is
<form action="submit.php"
an HTML method="post">
Form? <!-- Form Elements -->

</form>
action - URL to send data

method - GET or POST

Attributes target - Where to display


of <form> response
autocomplete -
Enable/disable autofill
novalidate - Disable default
validation
<input type="text">
<input type="email">

Input <input type="number">

Fields – <input type="password">


Overview <input type="date">
<input type="file">
<input type="submit">
<label
for="name">Name:</label>
Text
Field <input type="text"
id="name" name="name"
required placeholder="Enter
your name">
<label
for="pwd">Password:</label>
Password
Field <input type="password"
id="pwd" name="password"
minlength="6" required>
<label>Email:</label>

<input type="email"
Email & name="email" required><br>

Number <label>Age:</label>
Fields
<input type="number"
name="age" min="1" max="120">
<p>Gender:</p>

<input type="radio"
Radio name="gender"
Buttons value="Male"> Male

<input type="radio"
name="gender"
value="Female"> Female
<p>Hobbies:</p>

<input type="checkbox"

Checkboxes name="hobby"
value="Reading">
Reading

<input type="checkbox"
name="hobby"
value="Sports"> Sports
<label>Country:</label>

<select name="country">
Dropdown
<option
(Select value="Kenya">Kenya</option>
Menu) <option
value="Uganda">Uganda</option>

</select>
<label
for="msg">Message:</label><br>

Textarea
<textarea id="msg"
name="message" rows="4"
cols="50"></textarea>
<input type="date"
name="dob">

Date and <input type="time"


Time name="class_time">
Inputs
<input type="datetime-
local"
name="appointment">
<label
for="resume">Upload
CV:</label>
File
Upload <input type="file"
id="resume"
name="resume">
Hidden <input type="hidden" name="user_id"
value="12345">
Field
<input type="submit"
value="Submit">

<input type="reset"
value="Clear Form">
Buttons
<button type="button"
onclick="alert('Clicked!')">Click
Me</button>
required - Must be filled

min, max - Numbers range


Form
Validation minlength, maxlength - Text length

Attributes
pattern - Regex for format

readonly, disabled - Limited user


actions
<form action="submit.php" method="post">

<input type="text" name="name" placeholder="Full Name" required><br>

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

<input type="password" name="pass" required><br>

<input type="radio" name="gender" value="M"> Male

Complete
<input type="radio" name="gender" value="F"> Female<br>

<input type="checkbox" name="interest" value="coding"> Coding<br>

Form <select name="level">

Example <option>Beginner</option>

<option>Intermediate</option>

</select><br>

<textarea name="message"></textarea><br>

<input type="submit">

</form>
input, textarea, select {

padding: 10px;
Styling
Forms margin: 10px;
(CSS)
width: 100%;

}
Form Best Practices

1 2 3 4
Use labels for Group inputs Use Validate with
accessibility with <fieldset> placeholder HTML or
and <legend> text JavaScript
EXERCISE 1 – Basic Form

Create a form that asks for:


• Full Name
• Email
• Age
• Gender (radio)
• Country (dropdown)
• Submit button
EXERCISE 2 – Registration Form
Create a Student Registration Form with:
• Full Name
• Email
• Phone Number
• Date of Birth
• Gender (radio)
• Subjects (checkboxes)
• File upload for photo
• Comments (textarea)
• Submit and Reset buttons
Form Name
should
include:
Email

Phone
EXERCISE 3 CV Upload
– Job
Application Position Applying For (dropdown)

Form Cover Letter (textarea)

Agreement Checkbox

Submit button
Bonus: JavaScript Form Validation
<script>
function validateForm() {
let name = document.forms["myForm"]["name"].value;
if (name == "") {
alert("Name is required");
return false;
}
}
</script>
<form name="myForm"
Bonus: onsubmit="return
validateForm()">
JavaScript <input type="text"
Form name="name">
Validation <input type="submit">
Cont…. </form>
Wrap-Up & Resources

w3schools.com/html/html_forms.asp

MDN Web Docs - HTML Forms

Practice daily to master form creation.


Thank You
Questions or Help?
Joseph Odhiambo
+254708731994/
[email protected]

You might also like