HTML Forms

--- theme: seriph title: HTML Forms info: "Module F-HTML-004: form elements, labels, input types, validation, submitting data to a server" --- # HTML Forms --- # Why Forms Matter Forms let users **send data** to a website: - Sign up / Login - Search bars - Contact forms - Settings & checkout Open any site you use daily. Find a form, then inspect it in DevTools. What HTML elements are inside? --- # The `<form>` Element ```html <form action="https://oim.zhili.dev/echo/view" method="POST"> <label for="username">Name:</label> <input type="text" id="username" name="username"> <button type="submit">Submit</button> </form> ``` - `action`: where to send the data (a URL or server endpoint) - `method`: **GET** puts data in the URL; **POST** puts data in the request body > Try this: submit the form, then change `method` to `GET` and submit again. What's different in the URL? --- # See What the Server Receives Our teaching API at `oim.zhili.dev/echo/view` echoes back everything your form sends: ```html <form action="https://oim.zhili.dev/echo/view" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="name"> <label for="email">Email:</label> <input type="email" id="email" name="email"> <button type="submit">Send</button> </form> ``` Submit it and look at what comes back: your form data, IP, browser, OS. The server sees more than just what you typed. --- # GET vs POST | | GET | POST | |---|-----|------| | Data location | In the URL (`?name=Alice&email=...`) | In the request body (hidden) | | Visible to user? | Yes, in address bar | No | | Bookmarkable? | Yes | No | | Use for | Search, filters | Login, signup, anything sensitive | > Use POST for anything sensitive. GET is for reading, POST is for writing. --- # Labels + Text Input ```html <label for="full-name">Name:</label> <input type="text" id="full-name" name="name" placeholder="Enter your name"> ``` **Always use `<label>`!** - Improves accessibility (screen readers need it) - Clicking the label focuses the input > `for` matches the input's `id`. The `name` attribute is the key sent to the server. > AI tip: AI sometimes forgets `<label>` elements or skips the `for` attribute. Always check that every input has a matching label. --- # Input Types | Type | Use for | |------|---------| | `text` | Single line text | | `email` | Email with validation | | `password` | Hidden characters | | `number` | Numeric input | | `tel` | Phone numbers | | `date` | Date picker | ```html <input type="email" placeholder="email@example.com"> <input type="password" placeholder="Password"> <input type="number" min="0" max="100"> <input type="date"> ``` --- # Textarea, Select, Checkbox, Radio ```html <!-- Multi-line text --> <textarea id="msg" name="msg" rows="4"></textarea> <!-- Dropdown --> <select id="country" name="country"> <option value="">Choose...</option> <option value="us">United States</option> </select> <!-- Checkbox --> <input type="checkbox" id="agree" name="agree"> <label for="agree">I agree to the terms</label> <!-- Radio (same name = one choice) --> <input type="radio" id="r1" name="contact" value="email"> <label for="r1">Email</label> <input type="radio" id="r2" name="contact" value="phone"> <label for="r2">Phone</label> ``` --- # HTML5 Validation The browser validates for you, no JavaScript needed: ```html <input type="text" required> <input type="text" minlength="3" maxlength="50"> <input type="number" min="1" max="100"> <input type="email" required> ``` Try submitting a form with an empty `required` field. What happens? > Custom validation logic comes later with JavaScript. > AI tip: AI may skip `required` and other validation attributes. Always add them yourself after reviewing the generated form. --- # Grouping Fields You can wrap related inputs in `<fieldset>` with a `<legend>` label. This helps screen readers and adds visual structure. ```html <fieldset> <legend>Shipping Address</legend> <label for="street">Street:</label> <input type="text" id="street" name="street"> </fieldset> ``` You will not need `<fieldset>` often in this course, but know it exists for longer forms. --- # Styling Forms ```css input, textarea, select { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; /* prevents mobile zoom */ } input:focus, textarea:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 3px rgba(0,123,255,0.25); } ``` > Setting `font-size: 16px` on inputs prevents iOS Safari from zooming in on focus. --- # Your Turn Create `contact.html` in your course repo: 1. A form with `action="https://oim.zhili.dev/echo/view"` and `method="POST"` 2. Fields: name, email, message (use appropriate `type` attributes) 3. Add `required` validation on each field 4. Style with CSS: spacing, focus states, hover on submit button 5. Submit it and see what the server echoes back Then change `method` to `GET` and submit again. Compare the results. --- # References - [MDN: Web Forms](https://developer.mozilla.org/en-US/docs/Learn/Forms) - [MDN: Form Validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) - [OIM Teaching API docs](https://oim.zhili.dev/docs)