Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
forms

74 Articles
{
,

}
Direct link to the article Demystifying Screen Readers: Accessible Forms & Best Practices
accessibility forms

Demystifying Screen Readers: Accessible Forms & Best Practices

This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out “Managing User Focus with :focus-visible“. In this post we are going to look at using a …

Avatar of Chris DeMars
Chris DeMars on Apr 19, 2024 (Updated on May 17, 2024)
focus-visible css
Direct link to the article Managing User Focus with :focus-visible
accessibility forms

Managing User Focus with :focus-visible

This is going to be the 2nd post in a small series we are doing on form accessibility. If you missed the first post, check out Accessible Forms with Pseudo Classes. In this post we are going to look …

Avatar of Chris DeMars
Chris DeMars on Apr 5, 2024 (Updated on Apr 19, 2024)
Web Form Accessibility with focus-within
Direct link to the article Accessible Forms with Pseudo Classes
accessibility CSS focus forms HTML semantics

Accessible Forms with Pseudo Classes

Hey all you wonderful developers out there! In this post, I am going to take you through creating a simple contact form using semantic HTML and an awesome CSS pseudo class known as :focus-within. The :focus-within class allows for …

Avatar of Chris DeMars
Chris DeMars on Mar 22, 2024 (Updated on Mar 29, 2024)
Direct link to the article What’s New With Forms in 2022?
forms

What’s New With Forms in 2022?

Browsers are constantly adding new HTML, JavaScript and CSS features. Here are some useful additions to working with forms that you might have missed……

Avatar of Ollie Williams
Ollie Williams on Sep 8, 2022
Direct link to the article Zero Trickery Custom Radios and Checkboxes
checkboxes forms radio buttons

Zero Trickery Custom Radios and Checkboxes

I feel like half of all “custom-designed radio buttons and checkboxes” do two things:

  1. Make them bigger
  2. Colorize them
…
Avatar of Chris Coyier
Chris Coyier on Nov 17, 2021
Direct link to the article Detecting Specific Text Input with HTML and CSS
:not :placeholder-shown :valid form validation forms

Detecting Specific Text Input with HTML and CSS

Louis Lazaris breaks down some bonafide CSS trickery from Jane. The Pen shows off interactivity where:

  1. You have to press a special combination of keys on a keyboard.
  2. Then type a secret password.

From there, a special message pops …

Avatar of Chris Coyier
Chris Coyier on Nov 9, 2021
Direct link to the article enterkeyhint
forms semantics

enterkeyhint

I only just recently learned the enterkeyhint attribute on form inputs was a thing! It seems like kind of a big deal to me, as crafting HTML form markup is a decent slice of a front-end developer’s life, and this …

Avatar of Chris Coyier
Chris Coyier on Nov 5, 2021
Direct link to the article How to Create a Contact Form With Next.js and Netlify
forms netlify react

How to Create a Contact Form With Next.js and Netlify

We’re going to create a contact form with Next.js and Netlify that displays a confirmation screen and features enhanced spam detection.

Next.js is a powerful React framework for developing performant React applications that scale. By integrating a Next.js site with …

Avatar of Monica Powell
Monica Powell on Oct 21, 2021
Direct link to the article Building a Form in PHP Using DOMDocument
DOMDocument forms php

Building a Form in PHP Using DOMDocument

Learn how to build an HTML form in PHP using DOMDocument — a structured and expressive way to build logical markup.
Avatar of Jonathan Land
Jonathan Land on Sep 14, 2021
Direct link to the article Making Disabled Buttons More Inclusive
accessibility aria buttons forms

Making Disabled Buttons More Inclusive

Let’s talk about disabled buttons. Specifically, let’s get into why we use them and how we can do better than the traditional disabled attribute in HTML (e.g. <button disabled> ) to mark a button as disabled.

There are lots of …

Avatar of Sandrina Pereira
Sandrina Pereira on May 12, 2021 (Updated on May 24, 2022)
Direct link to the article 16px or Larger Text Prevents iOS Form Zoom
forms ios

16px or Larger Text Prevents iOS Form Zoom

This was a great “Today I Learned” for me from Josh W. Comeau. If the font-size of an <input> is 16px or larger, Safari on iOS will focus into the input normally. But as soon as the font-size is …

Avatar of Chris Coyier
Chris Coyier on May 4, 2021
  • 1
  • 2
  • 3
  • ...
  • 7
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top