Forms & Tables | Working with forms

Question 1

What is the purpose of the form element in HTML?

Answer 1

To gather user information, such as names and email addresses.

The form element is essential for collecting user input in web applications.

Question 2

What does the action attribute in a form specify?

Answer 2

Where the form data will be sent upon submission.

The action attribute defines the URL endpoint for form submission.

Question 3

What is an input element in HTML?

Answer 3

An element used to collect specific information from users, like names and email addresses.

Input elements are void elements and do not have closing tags.

Question 4

What does the type attribute of an input element define?

Answer 4

The data type expected from the user.

For example, ‘text’ expects plaintext input.

Question 5

How do you create an implicit association between a label and an input field?

Answer 5

By nesting an input inside a label element.

This method allows the label to be linked to the input without additional attributes.

Question 6

What is the purpose of the for attribute in a label element?

Answer 6

To explicitly associate the label with a specific input element.

The values for the for attribute and the input’s id must match.

Question 7

What type of input does the input element with type ‘email’ provide?

Answer 7

Basic validation for correctly formatted email addresses.

This helps ensure users enter valid email formats.

Question 8

What is the purpose of the placeholder attribute in an input element?

Answer 8

To show additional hints about the expected input format and type.

Placeholder text guides users on how to fill out the input field.

Question 9

Fill in the blank: The term ‘implicit’ refers to something that is _______.

Answer 9

understood or inferred without needing to be explicitly stated.

This concept is important in understanding how labels and inputs relate in HTML.

Question 10

True or False: The input element can have multiple closing tags.

Answer 10

False.

Input elements are void elements and do not have closing tags.

Question 11

What is the purpose of the button element?

Answer 11

To perform a particular action when it is activated.

Question 12

What is an example of a button element text?

Answer 12

Start Game

Question 13

What are some actions that a button element can perform?

Answer 13

• Submitting a form
• Showing a modal
• Toggling a side menu

Question 14

What attribute controls the behavior of a button when activated?

Answer 14

type attribute

Question 15

What is the default behavior of a button element when activated?

Answer 15

It will not do anything.

Question 16

What type attribute value makes a button interactive, such as showing an alert?

Answer 16

button type

Question 17

What is the type attribute value used for submitting a form?

Answer 17

submit

Question 18

What happens when a user clicks a submit button in a form?

Answer 18

Their data will be sent to the server and processed.

Question 19

What is the type attribute value that clears all input data in a form?

Answer 19

reset

Question 20

Why are reset buttons usually not recommended?

Answer 20

They could lead to users accidentally resetting their data.

Question 21

What is an alternative way to create buttons in HTML?

Answer 21

Using the input element.

Question 22

What type attribute value can an input element have?

Answer 22

• submit
• reset
• button

Question 23

What is the main difference between input elements and button elements?

Answer 23

Input elements are void elements and cannot have child nodes.

Question 24

What does the value attribute in an input element represent?

Answer 24

The button text.

Question 25

What flexibility does the button element offer compared to the input element?

Answer 25

You can nest text, images, and icons inside it.

Question 26

What is client-side form validation in HTML forms?

Answer 26

It ensures that users fill out necessary information in the correct format before submission.

Question 27

What does the term 'client-side' refer to?

Answer 27

Everything that happens on the user's computer or device.

Question 28

What does the term 'server-side' refer to?

Answer 28

Everything that happens on the server, including processing data and handling requests.

Question 29

Why is server-side validation necessary?

Answer 29

It adds security as malicious users can bypass client-side checks.

Question 30

What is an example of built-in form validation in HTML?

Answer 30

Using the required attribute in inputs.

Question 31

What does the required attribute do in an HTML form input?

Answer 31

Specifies that the user must fill out that portion of the form before submission.

Question 32

What happens if a user submits a form without filling out a required field?

Answer 32

They will be alerted that the field is required and the form will not be submitted.

Question 33

What is a common validation feature of email inputs?

Answer 33

They have basic validation to ensure correctly formatted email addresses.

Question 34

What are minlength and maxlength attributes used for?

Answer 34

To set the minimum and maximum length in characters for an input.

Question 35

Fill in the blank: The _______ attribute specifies that an input field must be filled out.

Answer 35

required

Question 36

True or False: Browsers perform extensive validation on all email addresses.

Answer 36

False

Question 37

What will happen if the input length does not meet minlength or exceeds maxlength?

Answer 37

The browser will show an alert message.

Question 38

What is the consequence of not including additional layers of validation?

Answer 38

The basic validation may not be sufficient for all cases.

Question 39

What are the different form states in HTML?

Answer 39

The different form states are: * Default state * Focused state * Disabled state * Readonly state ## Footnote Each state serves a specific purpose in user interaction.

Question 40

What is the default state of an email address input?

Answer 40

The default state is a blank input ## Footnote This is what the email input looks like when it is first rendered on the page.

Question 41

What indicates that a form control is in the focused state?

Answer 41

A blue highlighted border around the input ## Footnote This occurs when the user clicks on the form control or selects it with the keyboard's tab key.

Question 42

What does the disabled state signify for an input?

Answer 42

The input cannot be focused or activated ## Footnote To disable an input, the disabled boolean attribute is added to the element.

Question 43

How can you disable an email input in HTML?

Answer 43

## Footnote This code snippet demonstrates how to implement the disabled state.

Question 44

What happens when a user tries to click on a disabled input?

Answer 44

The focus will not be enabled ## Footnote Users cannot interact with disabled inputs.

Question 45

What is the readonly state in HTML?

Answer 45

The input is not editable by the user ## Footnote Users can see the value but cannot change it.

Question 46

How is an email input set to readonly in HTML?

Answer 46

## Footnote This code snippet sets the input to readonly with an initial value.

Question 47

What is a key difference between the disabled state and readonly state?

Answer 47

Readonly can be focused while disabled cannot ## Footnote This allows users to select readonly inputs but not interact with disabled ones.

Question 48

Why is understanding different form states important?

Answer 48

They ensure a smooth user experience by providing clear feedback and guidance ## Footnote This helps in handling errors effectively.