HTML & CSS- part 9

Question 1

How do you code a form’s submit button?

Answer 1

<input type=”submit”
value=”Send email message”>

The first part creates the button that submits the form when the user clicks on it.

The “value” part is the button text. Instead of “Send email message,” it could be “Submit,” “Send,” “Subscribe,” “Purchase,” or any other text you want.

Question 2

Is there an alternate to the standard submit button in a form?

Answer 2

If you want a custom button, create your own button image and write a tag like this.

<input type=”image” src=”images/subscribe-button.png” alt=”Sign up” width=”72” height=”18”>

Question 3

What are the parts of a radio tag in the world of forms?

Answer 3

<input type=”radio”
name=”found-thru”
value=”Google” checked=”checked”> Google

*Each radio button gets its own tag.

*The NAME is what binds a group together.

*checked=”checked” This is optional. The tag that includes this will be selected by default.

Question 4

In the world of forms, how do “checkboxes” work?

Answer 4

Exactly the same as “radio” except you can select more than one.

Question 5

What’s a select box also known as?

Answer 5

A drop-down box

Question 6

How do you code a select box?

Answer 6

<select name=”x”>
<option value=”cherries”>Cherries</option>
</select>

Question 7

In a select box, how do you keep people from picking the default answer?

Answer 7

Assign it an option value=”did not select” or something like that.

Question 8

What’s the mnemonic for remembering the code for a select box?

Answer 8

SNOV
select-name option-value

Question 9

What are five types of input in HTML?

Answer 9

text
textarea
submit/image submit
radio/checkbox
select box

Question 10

What are the fields in a text input?

Answer 10

name
rows
cols

Question 11

What are the fields in a submit input?

Answer 11

value

Question 12

What are the fields in a submit input using an image?

Answer 12

src
alt
width
height

Question 13

What are the fields in for a radio/checkbox input?

Answer 13

name
value
(opt) checked

Question 14

Which accessibility feature makes the text clickable so you don’t have to aim for just the radio button?

Answer 14

<label>
As a bonus, they cause the screen reader to read the text</label>

Question 15

What sucks about using <label> in a form?

Answer 15

They have to be added individually to each field, text area, radio button, checkbox, and selection option.

Question 16

How do you add a <label>?

Answer 16

You add a separate entry tied to an ID field in the input type code.

In this case, the ID in input type is “orange” and it’s tied to the for=”orange” in the label.

<input type=”radio” id=”orange” name=”fav_fruit” value=”HTML”>
<label for=”orange”>HTML</label>

Question 17

Which element groups related form parts in a box?

Answer 17

<fieldset>

Question 18

If you have grouped form elements in a box using <fieldset>, how do you add a title?

Answer 18

<legend>Fill out this form</legend>

Question 19

Which elements get styled with this?

form {

Answer 19

only labels and legends

Question 20

How do you style the selectors for form inputs?

Answer 20

input[type=”text”] {
input[type=”radio”] {
textarea {

Question 21

How do you set the width of a form?

Answer 21

form {
width: 50%;
}