mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-23 22:00:38 -04:00
feat(curriculum): create styling forms quiz (#56446)
This commit is contained in:
Hani Shaikh
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Which of the following is a common issue with the `datetime-local` input type?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
It cannot be used with CSS variables.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
It automatically submits the form upon value selection.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
It does not support real-time updates.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
The input format is different across browsers.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Why is it important to use `box-sizing: border-box;` when styling text inputs?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
It makes the text input focusable with a keyboard.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
It hides the input’s placeholder text.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
It removes the default browser styling for inputs.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
It ensures padding and borders are included in the element’s width and height.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is a benefit of setting a max-width for text inputs?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
It prevents users from entering long text.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
It makes the input unresponsive on larger screens.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
It automatically adjusts the font size.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
It ensures the input doesn’t stretch too wide on larger screens.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Why should you add `:focus` styles to text inputs?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
It hides the input’s border.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
It disables user input.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
It forces the browser to ignore default styles.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
It improves accessibility by making the input easier to identify when focused.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
How can you prevent text inputs from being cut off when resized?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
By adding `overflow: hidden;`.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
By setting a fixed height and width.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
By removing padding from the input.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
By using padding and line-height with flexible units like `em` or `rem`.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Why is it important to use descriptive placeholder text in form inputs?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
It helps to pre-fill the form for the user.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
It automatically validates the input as the user types.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
It hides the input label, reducing visual clutter.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
It provides users with guidance on the expected input format without cluttering the interface.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Why should you avoid using `outline: none;` without adding a custom focus style?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
It reduces the size of the text input.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
It hides the input from assistive technology users.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
It makes the input read-only.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
It removes the focus outline, which may confuse users about which field is selected.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is the purpose of using Flexbox or Grid for form layout?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
To make form controls appear in random positions.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
To make the form smaller on mobile devices.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
To hide form controls on large screens.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
To create a well-structured and responsive form layout.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Why should input elements be styled with a solid border?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
It makes the form look more colorful.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
It automatically increases form field size.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
It forces users to zoom in on mobile devices.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
To ensure input fields are clearly visible and easily recognizable as form controls.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
How does increasing the margin between form elements affect form usability?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
It decreases accessibility on mobile devices.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
It prevents users from submitting the form.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
It hides form labels.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
It improves readability by helping users see the grouping of related form elements.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is the primary reason for using `appearance: none` in form elements?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
To add new default styles to form elements.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
To enable form elements to appear larger on mobile devices.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
To disable form validation for specific elements.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
To remove the default browser styling from form elements and apply custom styles.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Which type of form elements is commonly styled using `appearance: none` to remove their default look?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
`<label>` elements
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
`<div>` elements
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
`<span>` elements
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
`<input>` and `<select>` elements.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
When should you avoid using `appearance: none` on form controls?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
When you want to fully customize the form control's style.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
When the browser’s default styles are hard to override.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
When you are building a mobile-first responsive form.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
When relying on the accessibility and familiarity of native form control appearances.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
How can using `appearance: none` improve the design of radio buttons and checkboxes?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
It increases the size of radio buttons and checkboxes.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
It automatically creates animation effects for radio buttons and checkboxes.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
It prevents users from interacting with radio buttons and checkboxes.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
It removes the browser's default appearance, allowing you to fully customize the design.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is a common issue that arises when using `appearance: none` on a select element?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
It makes the `select` element invisible.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
It disables the dropdown functionality.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
It breaks form validation.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
It removes the dropdown arrow, requiring you to add a custom arrow or indicator.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What issue can occur when using HTML5 validation attributes like `required` without custom messaging?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
It automatically validates all inputs without user interaction.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
It prevents the form from being submitted if all fields are filled.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
It allows users to see detailed error messages for each input.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Users may not understand why their submission fails, leading to frustration if no helpful feedback is provided.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What issue can arise when no margin is added between the header and the content?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
It makes the content load faster.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
It improves the overall readability of the content.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
It automatically centers the content under the header.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
The content may appear cramped or overlap with the header, making it difficult to read and reducing visual clarity.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What issue may arise with custom fonts when used in form elements?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
They may not display correctly on all browsers.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
They always load faster than system fonts.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
They prevent the use of responsive design.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Custom fonts may not be accessible to users if they are not properly loaded or fallback fonts are not specified.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What issue can arise when using `overflow: hidden;` on form elements?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
It improves the form’s overall accessibility.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
It automatically adjusts the form to fit within smaller screens.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
It ensures that all text content is always visible.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
It can cause content, such as text or labels, to be cut off if the element is resized or if padding is used incorrectly.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What common problem arises when submitting form data that includes `color` input?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
The `color` value gets automatically converted to grayscale.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
The browser displays an alert before submitting the form.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
It replaces the `color` value with a default value.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
The `color` input value is submitted as a hexadecimal string, which may require formatting on the server.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user