Please clone this repo.
Open "index.html" in your browser for a list of all the challenges.
For each challenge, make sure you are working in the correct folder!
Watch Out: It's easy to code in the wrong
index.html
file!
Please use only HTML to solve the following mini-challanges.
-
Login Form. Create an html
form
with two inputs: one for a username (named "username"), the other for password (named "password") (normally you don't see your password when you type it, so make sure it's blocked out!). What happens in the URL when you click submit? -
Doomed Yet? Create an html
form
that, on submit, sends the user to "hasthelargehadroncolliderdestroyedtheworldyet.com". Hint: what's the form action? Bonus: Can you change the submit button to say "Are we doomed?". -
Color Search. Create an html
form
that contains the html5 color-picker input (named "q"). When the user picks a color and clicks submit, redirect them to, e.g. "https://duckduckgo.com/?q=%2300fa91". -
Image Search. Create an html
form
that has an action of "https://www.google.com/search" and contains three inputs:- a hidden input with a name of "tbm" and a value of "isch".
- a (required) text input with a name of "q", and a default value of "http status cats".
- a submit button
You should end up here: "https://www.google.com/search?tbm=isch&q=http+status+cats"
-
Github Search. Create an html
form
that searches github for code examples that match a specific query (q
) and language (l
). For example, search results for "form select" in "HTML" files: https://github.com/search?q=form%20select&l=HTML -
Music Search. Create an html
form
that searches for music on the iTunes API. You will need to take care to use the correct query parameters. The only way to find out what they are is to read their documentation.
- Make you forms accessible by using
label
and user-friendly but usingplaceholder
. - Add some simple validations to your forms so that they do not submit if a user skips a field.
- Make your forms beautiful by using bootstrap.
- HTML Form Reference is a great resource and has been distilled below.
- HTML Input Reference
- Native Form Widgets
- Form Validation.