HTML_Forms_Presentation_v2_formtags.pptx

html forms

1. INTRODUCTION TO HTML FORMS College Presentation — Sayra

2. What are HTML Forms? • HTML forms collect user input on web pages. • They let users submit data (e.g., name, email, feedback) to a server. • Used for login, signup, search, contact forms, and more. Image / Illustration

3. Structure of an HTML Form • The <form> tag defines a form area. • Common attributes: action (URL), method (GET/POST). • Forms contain input fields and a submit control. <form action="submit.php" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="username" required> <input type="submit" value="Submit"> </form> Image / Illustration

4. Form Elements in HTML • <input> — single-line input (text, email, password, etc.) • <label> — describes an input (improves accessibility) • <textarea>, <select>, <option> — multi-line or dropdown inputs <label for="msg">Message</label> <textarea id="msg" name="message" rows="4"></textarea> <select name="options"> <option value="a">Option A</option> <option value="b">Option B</option> </select> Image / Illustration

5. Common Input Types • text, email, password, number, date • radio (single choice), checkbox (multiple choices) • file, hidden, submit, reset <input type="text" name="fullname"> <input type="email" name="email"> <input type="password" name="pwd"> <input type="radio" name="gender" value="male"> <input type="checkbox" name="agree"> Image / Illustration

6. Important Form Attributes • action — destination URL for form data. • method — GET (URL) or POST (request body). • enctype — encoding type (used for file uploads). <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="photo"> </form> Image / Illustration

7. GET vs POST Methods • GET appends data to URL (visible, limited length). • POST sends data in request body (secure for larger/secret data). • Use GET for search/read actions, POST for create/update. Image / Illustration

8. Example: Simple Contact Form • A typical contact form collects name, email, and message. • Server-side script receives and processes the data. • Validate inputs on client and server sides. <form action="/send" method="post"> <label>Name</label><input type="text" name="name" required> <label>Email</label><input type="email" name="email" required> <label>Message</label><textarea name="message"></textarea> <button type="submit">Send</button> </form> Image / Illustration

9. Best Practices & Validation • Use labels and placeholders for clarity. • Use required, pattern, min/max for HTML5 validation. • Always validate data again on the server. <!-- HTML5 validation --> <input type="email" name="email" required> <!-- Basic client-side check using JS --> <script>if(!email.value.includes('@')) alert('Invalid email')</script> Image / Illustration

10. Uses of HTML Forms / Conclusion • Login, Signup, Contact, Search, Payments, Surveys. • Forms are essential for user interaction on the web. • Remember security (sanitization) and accessibility. Image / Illustration