BodinglesTM - -   Bright Lightbulb Graphic Ideas   - -

The Web Developer Bootcamp 2024

Colt Steele

Back to HTML Reference Index


HTML Forms

HTML Forms and Tables PDF

W3Schools Forms Reference
W3Schools Form Input Types
MDN Forms Reference
MDN Form Input Types


Sample form with basic HTML validation

Marathon Entry Form

All fields are required

     


(must be between 5 and 10 characters)

Choose a race:












Some Basic Input Types

Input type "Text"


Input type "Password"


Input type "Checkbox"
You can make multiple selections.

I Like eating,

Select all that apply

Input type "Radio Button"
You can only select one.

Pick a size:


Input type "Drop-Down" List


Input type "Color"


Input type "Number"





HTML Form Validation

HTML itself has limited form validation. Most proper form validation is done with JavaScript.
But with HTML, you can specify elements as required inputs by adding the term required to the form input statement.

eg. < input type="text" id="username" name="user" required>

So by simply adding required, HTML will do basic validation and ensure the form is not submitted with required fields.


You can also use this with elements using min, max, minlength, and maxlength arguments, such as a password
field (for example), lets say, min length of 5, and max length of 10

If the length is too short, you'll get a message, and it will not let you add any more characters after max is reached.
< input type="password" id="pswd" name="pswd" minlength="5" maxlength="10" required>

You can also do some basic pattern matching on elements such as email and url's. More info can be found HERE.





Functioning Search Forms

Because every company has different formats for a search, do a search on their search page and from the results in the address bar, and pick out the address and "name" for the search query.

ex. for reddit,
form action = "https://www.reddit.com/search"
input name = "q"

*also, you can omit the "Submit" button and it will submit automatically when the user enters the search term and presses Enter, as in the Google example below.


Reddit Search

  



Google Search




Youtube Search

  



Back to Top