Creating Forms in HTML

Question 1

What are the three basic elements of a form?

Answer 1

The form itself, the inputs and the submit button.

Question 2

Which vscode extension allow automatic refresh of the website changes? Is there an alternative?

Answer 2

Live server… then click “go live” in the status bar. Yes… browser-sync for npm.

Question 3

What is the type of the input that triggers an action in the server? What is the default method of the form?

Answer 3

type=”submit”. The default method is GET.

Question 4

Which is the most common encoding used in forms?

Answer 4

url-encoded

Question 5

What is the basic utility of a form?

Answer 5

Allows the user to interact with the website.

Question 6

What are the basinc input categories?

Answer 6

text, multi line text (text area) and selection.

Question 7

When should we use the input type hidden? Can we place passwords there?

Answer 7

So the specified/fixed value is sent over the get/post request. Do not use to send passwords and other secrets since it is still show up in the network view.

Question 8

How to create a textarea input that has a initial size?

Answer 8

Via cols and rows properties.

Question 9

Can the forms be rendered in a different way in different browsers? Cite an example.

Answer 9

Yes. Date picker button inside the input on webkit and not visible in firefox.

Question 10

What happens if a check box with the same name but different values are checked? Is it supported by the backend frameworks?

Answer 10

The post method will have the name duplicated, the value will be different. Yes.

Question 11

How to group form inputs? How to add a text to that group? Where this text element needs to be set?

Answer 11

Via fieldset html element. Via legent html element. Inside the fieldset

Question 12

What is the use of the label html element?

Answer 12

To associate text/icons with a specific input.

Question 13

How to explicit and implicit connect a label to an input?

Answer 13

via property for=”id of input” and by enclosing the input with the label element.

Question 14

What does the tabindex property do with the html elements?

Answer 14

Defines the tab order;

Question 15

Tabindex starts with the number…? And 0 means? Negative means?

Answer 15

1. 0 means the last element. negative means will never be accessible via tabs.

Question 16

Should I define tabindex in all focusable elements in the form? What if I do?

Answer 16

No. If you do, all elements needs tab indexes.

Question 17

How to apply a css style to an email input?

Answer 17

input[type=”email”]{
background-color: purple;
}

Question 18

What does the label {display: block;} does? why?

Answer 18

Makes the input after the label go down. Because lables are by default inline elements.

Question 19

How to round the corners of the inputs?

Answer 19

border-radius: 7px

Question 20

What are simple and common client validation attributes? Cite 2 for minimum validation and how to require a field.

Answer 20

min, minLength and required.

Question 21

Which one is a complex but more complete client validation?

Answer 21

pattern (regex)

Question 22

How to apply styles based on validity (pseudo-class)?

Answer 22

input: valid {border-color: green}
input: invalid

Question 23

How to use pseudo-class to make an invalid field black-bordered when selected?

Answer 23

input:focus:invalid {border-color: black;}

Question 24

Does validation in the client replaces the server ones and vice versa?

Answer 24

No. Server side validation is even more important the client side ones.