From e62064708fdababbab4211509d1d061db7c9b6e6 Mon Sep 17 00:00:00 2001 From: Diem-Trang Pham <6422507+pdtrang@users.noreply.github.com> Date: Fri, 24 Oct 2025 04:07:36 -0500 Subject: [PATCH] feat(curriculum): add interactive examples to styling text input lesson (#63001) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Thank you for your contribution to the page! 👍 We are happy to accept these changes and look forward to future contributions. 🎉 --- .../672aa791227e755da64cf240.md | 403 +++++++++++++++++- 1 file changed, 401 insertions(+), 2 deletions(-) diff --git a/curriculum/challenges/english/blocks/lecture-best-practices-for-styling-forms/672aa791227e755da64cf240.md b/curriculum/challenges/english/blocks/lecture-best-practices-for-styling-forms/672aa791227e755da64cf240.md index 3514f2dda04..98877f98876 100644 --- a/curriculum/challenges/english/blocks/lecture-best-practices-for-styling-forms/672aa791227e755da64cf240.md +++ b/curriculum/challenges/english/blocks/lecture-best-practices-for-styling-forms/672aa791227e755da64cf240.md @@ -5,15 +5,414 @@ challengeType: 19 dashedName: what-are-some-best-practices-for-styling-text-inputs --- -# --description-- +# --interactive-- As with all text elements you need to ensure the styles you apply to the text input are accessible. This means the font needs to be adequately sized and the color needs to have sufficient contrast with the background. +:::interactive_editor + +```html + + +
+ + + +
+ +``` + +```css +body { + background-color: #f9fafb; + color: #222; + padding: 2rem; +} + +.accessible-form { + max-width: 320px; + margin: 0 auto; +} + +label { + display: block; + font-weight: 600; + margin-bottom: 0.5rem; +} + +input[type="text"] { + width: 100%; + padding: 0.6rem 0.8rem; + font-size: 1rem; + border: 2px solid #555; + border-radius: 4px; + background-color: #fff; + color: #111; +} + +input[type="text"]:focus { + outline: 3px solid #1e90ff; + border-color: #1e90ff; +} + +button { + margin-top: 1rem; + padding: 0.6rem 1rem; + font-size: 1rem; + background-color: #1e90ff; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover, +button:focus { + background-color: #187bcd; +} + +``` + +::: + The placeholder, however, is often forgotten. It's important to remember that this is also text and you will likely need to change the styling to ensure it's readable. +:::interactive_editor + +```html + + +
+ + + +
+ +``` + +```css +body { + background-color: #f9fafb; + color: #222; + padding: 2rem; +} + +.accessible-form { + max-width: 320px; + margin: 0 auto; +} + +label { + display: block; + font-weight: 600; + margin-bottom: 0.5rem; +} + +input[type="email"] { + width: 100%; + padding: 0.6rem 0.8rem; + font-size: 1rem; + border: 2px solid #555; + border-radius: 4px; + background-color: #fff; + color: #111; +} + +input[type="email"]::placeholder { + color: #555; + opacity: 1; + font-style: italic; +} + +input[type="email"]:focus { + outline: 3px solid #1e90ff; + border-color: #1e90ff; +} + +button { + margin-top: 1rem; + padding: 0.6rem 1rem; + font-size: 1rem; + background-color: #1e90ff; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover, +button:focus { + background-color: #187bcd; +} + +``` + +::: + Another thing to keep in mind is that you should allow the user to modify the input. For example, if it's a text area you should not remove the ability to resize it. The input should also scale accordingly when the user zooms the page. -Input elements are also focusable. When you are editing your styles you should take care that you preserve a noticeable indicator when the element has focus such as a bold border. Additionally there is the error state to consider. When the user's text does not pass the input validation there is a visual indicator that shows there is something wrong. As you give your element your personal flair you want to be sure that state is still noticeable and that it does not look similar to the focus indicator. With all this in mind you can now create captivating user forms. +:::interactive_editor + +```html + + +
+ + + +
+ +``` + +```css +body { + background-color: #f9fafb; + color: #222; + padding: 2rem; + line-height: 1.5; +} + +.accessible-form { + max-width: 480px; + margin: 0 auto; +} + +label { + display: block; + font-weight: 600; + margin-bottom: 0.5rem; +} + +textarea { + width: 100%; + min-height: 120px; + padding: 0.8rem; + font-size: 1rem; + border: 2px solid #555; + border-radius: 4px; + background-color: #fff; + color: #111; + resize: both; + box-sizing: border-box; +} + +textarea::placeholder { + color: #555; + opacity: 1; +} + +textarea:focus { + outline: 3px solid #1e90ff; + border-color: #1e90ff; +} + +button { + margin-top: 1rem; + padding: 0.6rem 1rem; + font-size: 1rem; + background-color: #1e90ff; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover, +button:focus { + background-color: #187bcd; +} + +``` + +::: + +Input elements are also focusable. When you are editing your styles you should take care that you preserve a noticeable indicator when the element has focus such as a bold border. + +:::interactive_editor + +```html + + +
+ + + + + + + +
+ +``` + +```css +body { + background-color: #f9fafb; + color: #222; + padding: 2rem; +} + +.accessible-form { + max-width: 360px; + margin: 0 auto; +} + +label { + display: block; + font-weight: 600; + margin-top: 1rem; + margin-bottom: 0.5rem; +} + +input[type="text"], +input[type="email"] { + width: 100%; + padding: 0.6rem 0.8rem; + font-size: 1rem; + border: 2px solid #666; + border-radius: 4px; + background-color: #fff; + color: #111; + transition: border-color 0.2s, box-shadow 0.2s; +} + +input::placeholder { + color: #555; + opacity: 1; +} + +input:focus { + border-color: #1e90ff; + box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.4); + outline: none; +} + +button { + margin-top: 1.5rem; + padding: 0.6rem 1rem; + font-size: 1rem; + background-color: #1e90ff; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover, +button:focus { + background-color: #187bcd; +} + +``` + +::: + +Additionally there is the error state to consider. When the user's text does not pass the input validation there is a visual indicator that shows there is something wrong. + +To have the error message dynamically update, you would need to use JavaScript, which you will learn about in future lessons. + +:::interactive_editor + +```html + + +
+ + +

+ Please enter a valid email address. +

+ + +
+ + +``` + +```css +body { + background-color: #f9fafb; + color: #222; + padding: 2rem; + font-family: system-ui, sans-serif; +} + +.accessible-form { + max-width: 360px; + margin: 0 auto; +} + +label { + display: block; + font-weight: 600; + margin-bottom: 0.5rem; +} + +input[type="email"] { + width: 100%; + padding: 0.6rem 0.8rem; + font-size: 1rem; + border: 2px solid #666; + border-radius: 4px; + background-color: #fff; + color: #111; + transition: border-color 0.2s, box-shadow 0.2s; +} + +input::placeholder { + color: #555; + opacity: 1; +} + +input:focus { + border-color: #1e90ff; + box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.4); + outline: none; +} + +input.error { + border-color: #d93025; + background-color: #fff5f5; +} + +input.error:focus { + border-color: #d93025; + box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.4); +} + +.error-message { + color: #d93025; + font-size: 0.95rem; + margin-top: 0.4rem; +} + +button { + margin-top: 1.5rem; + padding: 0.6rem 1rem; + font-size: 1rem; + background-color: #1e90ff; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover, +button:focus { + background-color: #187bcd; +} + +``` + +::: + +As you give your element your personal flair, you want to be sure that the error state is still noticeable and that it does not look similar to the focus indicator. With all this in mind you can now create captivating user forms. # --questions--