Scribd
Upload
2 views

HTML Forms Tutorial

This document provides a comprehensive guide on HTML forms, detailing their purpose, attributes, and various input types such as text fields, radio buttons, and file uploads. It includes best practices for form design, validation techniques, and practical exercises for creating different types of forms. Additionally, it offers resources for further learning and emphasizes the importance of accessibility and user experience.

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 PDF, TXT or read online on Scribd
2 views

HTML Forms Tutorial

This document provides a comprehensive guide on HTML forms, detailing their purpose, attributes, and various input types such as text fields, radio buttons, and file uploads. It includes best practices for form design, validation techniques, and practical exercises for creating different types of forms. Additionally, it offers resources for further learning and emphasizes the importance of accessibility and user experience.

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 PDF, TXT or read online on Scribd
You are on page 1/ 25

Mastering HTML Forms - Step-by-Step

From Basics to Complete Forms

By: Your Name


What is an HTML Form?

- A form collects user data.

- Usually sent to a server for processing.

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

<!-- Form Elements -->

</form>
Attributes of <form>

action - URL to send data

method - GET or POST

target - Where to display response

autocomplete - Enable/disable autofill

novalidate - Disable default validation


Input Fields - Overview

<input type="text">

<input type="email">

<input type="number">

<input type="password">

<input type="date">

<input type="file">

<input type="submit">
Text Field

<label for="name">Name:</label>

<input type="text" id="name" name="name" required placeholder="Enter your name">


Password Field

<label for="pwd">Password:</label>

<input type="password" id="pwd" name="password" minlength="6" required>


Email & Number Fields

<label>Email:</label>

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

<label>Age:</label>

<input type="number" name="age" min="1" max="120">


Radio Buttons

<p>Gender:</p>

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

<input type="radio" name="gender" value="Female"> Female


Checkboxes

<p>Hobbies:</p>

<input type="checkbox" name="hobby" value="Reading"> Reading

<input type="checkbox" name="hobby" value="Sports"> Sports


Dropdown (Select Menu)

<label>Country:</label>

<select name="country">

<option value="Kenya">Kenya</option>

<option value="Uganda">Uganda</option>

</select>
Textarea

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

<textarea id="msg" name="message" rows="4" cols="50"></textarea>


Date and Time Inputs

<input type="date" name="dob">

<input type="time" name="class_time">

<input type="datetime-local" name="appointment">


File Upload

<label for="resume">Upload CV:</label>

<input type="file" id="resume" name="resume">


Hidden Field

<input type="hidden" name="user_id" value="12345">


Buttons

<input type="submit" value="Submit">

<input type="reset" value="Clear Form">

<button type="button" onclick="alert('Clicked!')">Click Me</button>


Form Validation Attributes

required - Must be filled

min, max - Numbers range

minlength, maxlength - Text length

pattern - Regex for format

readonly, disabled - Limited user actions


Complete Form Example

<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

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

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

<select name="level">

<option>Beginner</option>

<option>Intermediate</option>

</select><br>

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

<input type="submit">

</form>
Styling Forms (CSS)

input, textarea, select {

padding: 10px;

margin: 10px;

width: 100%;

}
Form Best Practices

- Use labels for accessibility

- Group inputs with <fieldset> and <legend>

- Use placeholder text

- Validate with HTML or 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


EXERCISE 3 - Job Application Form

Form should include:

- Name

- Email

- Phone

- CV Upload

- Position Applying For (dropdown)

- 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" onsubmit="return validateForm()">

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

<input type="submit">

</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?

Your Name

Your Contact / Email

You might also like