Forms cheat sheet

Some of these attributes also apply to select and textarea.

• Define the input as being compulsory.

• Whether the radio or checkbox are selected.

• Puts a default value into the field.

• Adds a temporary, helpful hint into the field.
• Do not use this as a replacement for

• Disable auto completion in the field.

• Disable auto capitalization in the field.
• Non-standard: only works in iOS.

• Hint the browser to display a specific keyboard.
• verbatim , numeric , etc.

• The id of an associated

• For setting a maximum number of characters.

• For setting a minimum number of characters.

• Sets a minimum numerical value on range & number .

• Sets a maximum numerical value on range & number .

• Controls how the number will increment in range & number .

• A JavaScript regular expression to control what is valid input.

• For allowing multiple entries in the field.
• Works for:, email , file

• Trigger the browser to perform spell checking in the field.

• Stops the user from modifying the value of the field.

• Stops any interaction on the field.

• When the page loads, this field will be focused.
• Be really careful, only use this when the whole purpose of the page is to fill the form.

CSS selectors

• Style an element when its keyboard focused.

• Style an element when it doesn’t have the required attribute.

• Style an element when it does have the required attribute.

• Style an element when its contents are a acceptable (email, url, pattern, etc.)

• Style an element when its contents are not acceptable.

• Style a checkbox or radio button when it is selected.

• Style an input when it has the disabled attribute.

• Style an element when it doesn’t have the disabled attribute.

• Style a number or range when the selected value is within the min and max .

• Style a number or range when the selected value is outside the min and max .

• Style a checkbox when its set to an undetermined state by JavaScript.

Examples

 
Email address Sign up! 
 

 
Favourite dinosaur
 T. rex Triceratops Stegosaurus 
 

Cheat sheets & checklists

Want a quick review with just a list of all the cheat sheets, checklists & flowcharts on the website? Here it is!

Help Learn the Web be the best it can! Send anonymous feedback.

© Thomas J Bradley — learntheweb.courses. All code for this website licensed under the MIT License. All tutorial code licensed under the CC0 Public Domain Dedication. All text, imagery, design, tutorials & videos licensed under the CC BY-NC-SA License. Unless otherwise noted. Privacy & cookies policy Learn the Web, Ottawa, ON, Canada