HTML Forms Flashcards

1
Q

HTML Forms

A

Responsible for collecting information to send somewhere else.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Form Element

<form></form>

A

Creates the form before adding any data

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Skeleton of a Form

A

<form>
</form>

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 well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Input Element
<input></input>

A

If we want to create an input field in our form, we’ll need the help of the input element.

The input element has a type attribute which determines how it renders on the web page and what kind of data it can accept.

It’s also important that we include a name attribute for the input. Without the name attribute, information in the input won’t be sent when the form is submitted.
Ex:

<input></input>

We could also assign a default value for the value attribute so that users have a pre-filled text field when they first see the rendered form like so:

<input></input>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Label Element
<label></label>

A

For a user to properly identify an input we use the appropriately named label element.To associate a label and an input, the input needs an id attribute. We then assign the for attribute of the label element with the value of the id attribute of input, like so:

<label>What do you want to eat?</label>
<br></br>
<input></input>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Password Attribute
<input></input>

A

An <input></input> element will replace input text with another character like an asterisk (*) or a dot. The code below provides an example of how to create a password field:

<label>Password: </label>
<input></input>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Range Attribute
<input></input>

A

If we wanted to limit what numbers our users could type we might consider using a different type value. Another option we could use is setting type to “range” which creates a slider.

We could also control how smooth and fluid the slider works by assigning the step attribute a value. Smaller step values will make the slider move more fluidly, whereas larger step values will make the slider move more noticeably.

Ex: <input></input>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Number Attribute
<input></input>

A

By setting type=”number” for an input we can restrict what users type into the input field to just numbers (and a few special characters like -, +, and .)

We can also provide a step attribute which creates arrows inside the input field to increase or decrease by the value of the step attribute. Below is an example:

<label> Years of experience: </label>
<input></input>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Checkbox Input Attribute
<input></input>

A

In a form we would use the input element and set type=”checkbox”
Ex:

<p>Choose your pizza toppings:</p>

<label>Extra cheese</label>
<input></input>
<br></br>
<label>Pepperoni</label>
<input></input>
<br></br>
<label>Anchovy</label>
<input></input>

Notice: There are assigned values to the value attribute of the checkboxes. These values are not visible on the form itself, that’s why it is important that we use an associated label to identify the checkbox.
each input has the same value for the name attribute. Using the same name for each checkbox groups the inputs together. However, each input has a unique id to pair with a label.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Radio Button Input
<input></input>

A

For if we want to present multiple options and only allow for one selection. Ex:

<p>What is sum of 1 + 1?</p>

  <input type="radio" id="two" name="answer" 
  value="2">
  <label for="two">2</label>
  <br>
  <input type="radio" id="eleven" 
  name="answer" value="11">
  <label for="eleven">11</label>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Drop-down List (Select Element)
<select></select>

A

Alternative of a radio button input
ex:

<label>What’s for lunch?</label>
<select>
<option>Pizza</option>
<option>Curry</option>
<option>Salad</option>
<option>Ramen</option>
<option>Tacos</option>
</select>

Notice in the code that we’re using the element select to create the dropdown list. To populate the dropdown list, we add multiple option elements, each with a value attribute. By default, only one of these options can be selected.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Datalist (Datalist Element)

<datalist></datalist>

A

The datalist is used with an <input></input> element. The input creates a text field that users can type into and filter options from the datalist. Ex:

<label>Ideal city to visit?</label>
<input></input>

<datalist>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</datalist>

Notice, in the code above, we have an input that has a list attribute. The input is associated to the datalist via the input‘s list attribute and the id of the datalist.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Textarea Element

<textarea></textarea>

A

Instead of using an input element, we could use the textarea element.

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. Ex:

<label>New Blog Post: </label>
<br></br>

<textarea>
</textarea>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Submit Form
<input></input>

A

To make a submit button in a <form>, we’re going to use the reliable <input></input> element and set the type to “submit”. Ex:

<input></input>

Notice in the code snippet that the value assigned to the <input></input> shows up as text on the submit button. If there isn’t a value attribute, the default text, Submit shows up on the button.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly