LEARN HTML: FORMS
What I'm doing today...
The<form> element is a great tool for collecting information, but then we need to send that information somewhere else for processing.
EX:<form action="/practice.html" method="POST">
<h1>Welcome to Davie's Burgers</h1>
<p>We're excited to have you here!</p>
</form>
If we want to create an input field in our
EX: <input type="text" name="username" value="Davie">
We will also have to label the things that we code. So that we can find it easily when we look back to it. This is to set up the login page, the following code allows me to set up the box for entering the username and also the password.
EX:<label for="username">Username:</label>
<input type="text" name="username" id="username">
<br>
<label for="user-pw">Password:</label>
<input type="password" id="user-pw" name="user-pw">
How to allow users to enter numbers.
EX:<input id="amount" type="number" step="1" name="amount">
Another option we could use is setting
<input type="radio">
How to set up a drop down list. (used after input)
EX: <select name="bun" id="bun">
<option value="sesame">Sesame</option>
<option value="potato">Potato</option>
<option value="gravy">Gravy</option>
How to set up a search bar with datalist. (used after input)
EX:<datalist id="sauces">
<option value="ketchup">Ketchup</option>
<option value="mayo">Mayo</option>
<option value="honey mustard">Honey Mustard</option>
How to add a textarea that allows customers to type words in it.
EX: <textarea id="extra" name="extra" rows="3" cols="40">Ex: Extra tomato</textarea>
How to create a submit button.
<input type="submit" value="Submit">
(The text under value can be changed to other words like "send")
What I'll be doing tomorrow...
<form>, we'll need the help of the <input> element. (Put under the <form>)EX: <input type="text" name="username" value="Davie">
We will also have to label the things that we code. So that we can find it easily when we look back to it. This is to set up the login page, the following code allows me to set up the box for entering the username and also the password.
EX:<label for="username">Username:</label>
<input type="text" name="username" id="username">
<br>
<label for="user-pw">Password:</label>
<input type="password" id="user-pw" name="user-pw">
How to allow users to enter numbers.
EX:<input id="amount" type="number" step="1" name="amount">
Another option we could use is setting
type to "range" which creates a slider.EX: <input id="doneness" name="doneness" type="range" min="0" max="5" step="0.5">
Then it taught me how to create checkbox.
<input type="checkbox">
Create radios.<input type="radio">
How to set up a drop down list. (used after input)
EX: <select name="bun" id="bun">
<option value="sesame">Sesame</option>
<option value="potato">Potato</option>
<option value="gravy">Gravy</option>
How to set up a search bar with datalist. (used after input)
EX:<datalist id="sauces">
<option value="ketchup">Ketchup</option>
<option value="mayo">Mayo</option>
<option value="honey mustard">Honey Mustard</option>
How to add a textarea that allows customers to type words in it.
EX: <textarea id="extra" name="extra" rows="3" cols="40">Ex: Extra tomato</textarea>
How to create a submit button.
<input type="submit" value="Submit">
(The text under value can be changed to other words like "send")
What I've learn today...
I've learn how to set up different forms or selection online such as check boxes, drop down lists, slider and others. This is really connected to our daily life, as we have went through a lot of these forms and it's always good to know how it works.What I'll be doing tomorrow...
No comments:
Post a Comment