html forms Flashcards
What’s <form>?
hint
<form>
</form>
The <form> element is a great tool for collecting information.
We need to supply the <form> element with both the location of where the <form>‘s information goes and what HTTP request to make.
What is the action and the method attribute for?
The action attribute determines where the information is sent.
The method attribute is assigned a HTTP verb that is included in the HTTP request.
How do you create an input field in your <form> ?
Using the <input></input> element.
The <input></input> element has a type attribute which determines how it renders on the web page and what kind of data it can accept. e.g. type=”text”
It’s also important that we include a name attribute for the <input></input>, why?
Without the name attribute, information in the <input></input> won’t be sent when the <form> is submitted.
The value of the ‘value’ attribute is paired with the value of the name attribute and sent as text when the form is submitted..
e.g. <form action="/example.html" method="POST">
<input></input>
</form>
if you type “i won’t pay”
When the form is submitted, the text: “first-text-field= I won’t pay” is sent to /example.html.
Can you assign a default value for the ‘value’ attribute? if so, how?
Yes,
<input></input>
How would a user properly identify an <input></input> element?
For a user to properly identify an <input></input> we use the appropriately named <label> element.</label>
How do you associate an <input></input> and a <label> element?
hint</label>
<form>
<label>What do you want to eat?</label>
<br></br>
<input></input>
</form>
To associate a <label> and an <input></input>, the <input></input> needs an id attribute.
We then assign the for attribute of the <label> element with the value of the id attribute of <input></input>.</label></label>
How would you input a password into a form so other people can’t see?
An <input></input> element will replace input text with another character like an asterisk () or a dot ().
How do you create a form where you can only type numbers?
What does the step attribute do?
By setting type=”number” for an <input></input> we can restrict what users type into the input field to just numbers.
step attribute which creates arrows inside the input field to increase or decrease by the value of the step attribute. e.g. step=”1”
How do you create a slider?
(with <input></input>).
<form>
<label> Volume Control</label>
<input></input>
</form>
Firstly, you would set type=”range”.
You can use min= and max= to set the minimum and maximum amount.
We could also control how smooth and fluid the slider works by assigning the ‘step’ attribute a value.
The lower the number the more fluid the slider where as the bigger the number results in the slider moving more noticeably.
How would you create a checkbox?
(with <input></input>).
Make sure you use <label> per checkbox.</label>
In a <form> we would use the <input></input> element and set type=”checkbox”.
checkbox example:
<form>
<p>Choose your pizza toppings:</p>
<label>Extra cheese</label>
<input></input>
<br></br>
</form>
<label>Pepperoni</label>
<input></input>
<br></br>
<label>Anchovy</label>
<input></input>
</form>
How would you create a radio button?
<form>
<p>What is sum of 1 + 1?</p>
<input></input>
<label>2</label>
</form>
type=”radio”
<br></br>
<input></input>
<label>11</label>
</form>
To group radio buttons together, we assign them the same name and only one radio button from that group can be selected.
How would you create a dropdown list?
<form>
<label>What's for lunch?</label>
<select>
<option>Pizza</option>
<option>Curry</option>
<option>Salad</option>
<option>Ramen</option>
<option>Tacos</option>
</select>
</form>
How would you use the <datalist> element?</datalist>
<form>
<label>Ideal city to visit?</label>
<input></input>
<datalist>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</datalist>
</form>
What is the <textarea> element used for?</textarea>
<form>
<label>New Blog Post: </label>
<br></br>
<textarea>
here is the default value</textarea>
</form>
The <textarea> element is used to create a bigger text field for users to write more text.
We can add the attributes rows and cols to determine the amount of rows and columns for the <textarea>.
If we want to add a default value to <textarea> we would include it within the opening and closing tags.</textarea></textarea></textarea>
How would you create a submit button in a form?
To make a submit button in a <form>, we’re going to use the reliable <input></input> element and set the type to “submit”.
<form>
<input></input>
</form>
