Tags
<form method='post' action='…'>
- Tag that wraps around all the form elements.
action
points to where the data should be submitted.
- Used to group elements together, like radio buttons.
- Must always have a legend.
<legend>
- Adds a title to the fieldset.
- Must be inside a fieldset.
- Every form needs a button.
<label for='…'>
- Adds a name to any field.
- Every field must have a label.
- Adds an input field of varying types.
- Must always have an
id
to associate a label. - The
type='…'
attribute defaults totext
.
<textarea>
- Adds a large, multi-line text field.
- Must always have an
id
to associate a label.
- Creates a drop-down choice input.
- Populate the choices with
<option>
tags. - Must always have an
id
to associate a label.
<datalist>
- Creates a list of items for autocompletion.
- Populate the choices with
<option>
tags. - Won’t be visible until the associated field is typed into.
- Creates an entry inside
<select>
or<datalist>
. - Use the
selected
attribute to set a default value. - For select:
<option>Triceratops</option>
- For datalist:
<option value='Pteranodon'>
<optgroup label='…'>
- Creates a group of options inside a
<select>
. label='…'
is used as a visible name for the group.
- Represents the result of a calculation performed by JavaScript.
for='…'
is a space-separate list of inputid
s that contributed to the calculation.
Input types
text
default- Single line text field.
- If you want, you can leave
type='text'
off the input.
- Accepts numbers; has a up/down switch.
email
- Accepts valid email addresses.
- For telephone numbers.
- There is no restricted format to accommodate all different countries.
url
- Accepts a valid website URL.
- For passwords; hides typed characters.
time
- For accepting time: hours, minutes, seconds.
- For accepting dates; shows a calendar picker.
datetime-local
- For accepting a both a date and a time; shows a calendar & time picker.
- For accepting a specific week; likely shows a calendar picker.
month
- For accepting a specific month; likely shows a calendar picker.
- For picking a specific colour; shows a colour palette.
- Outputs as a hex colour.
range
- For selecting from a range of numbers.
- For choosing a file to upload.
- Use
accept='…'
to limit filetypes. <input type='file' accept='.jpg,.png,.gif'>
search
- Specifies the input as a search field.
- Turns the input into a check toggle.
radio
- Turns the input into a radio button.
- All radio buttons in the group should have the same
name='…'
- Makes the input field invisible.
Input attributes
Interactive cross-site scripting (XSS) cheat sheet for 2021, brought to you by PortSwigger. Actively maintained, and regularly updated with new vectors. Use standard HTML forms for username and password input with appropriate type attributes. Avoid plugin-based login pages (such as Flash or Silverlight). Implement a reasonable maximum password length, such as 64 characters, as discussed in the Password Storage Cheat Sheet. Allow any printable characters to be used in passwords. /HTML input elements can be of type number. These input ±elds allow the user to enter only numbers and a few special characters inside the ±eld. The example code block shows an input with a type of number and a name of balance.When the input ±eld is a part of a form, the form will receive a key-value pair with the format: name: value after form submission.
Some of these attributes also apply to select and textarea.
- Define the input as being compulsory.
<input required>
checked
- Whether the
radio
orcheckbox
are selected. <input type='checkbox' checked>
- Puts a default value into the field.
<input type='range' value='4'>
placeholder='…'
- Adds a temporary, helpful hint into the field.
<input type='email' placeholder='[email protected]'>
- Do not use this as a replacement for
<label>
- Disable auto completion in the field.
autocapitalize='none'
- Disable auto capitalization in the field.
- Non-standard: only works in iOS.
- Hint the browser to display a specific keyboard.
verbatim
,numeric
, etc.
list='…'
- The
id
of an associated<datalist>
- For setting a maximum number of characters.
<input type='email' maxlength='256'>
minlength='…'
- For setting a minimum number of characters.
<input type='text' minlength='6'>
- Sets a minimum numerical value on
range
&number
. <input type='number' min='5'>
max='…'
- Sets a maximum numerical value on
range
&number
. <input type='range' max='100'>
- Controls how the number will increment in
range
&number
. <input type='number' step='0.1'>
pattern='…'
- A JavaScript regular expression to control what is valid input.
<input type='text' pattern='[A-Za-z][0-9][A-Za-z] ?[0-9][A-Za-z][0-9]'>
- For allowing multiple entries in the field.
- Works for:
<select>
,email
,file
spellcheck
- Trigger the browser to perform spell checking in the field.
- Stops the user from modifying the value of the field.
disabled
- 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
:focus
- Style an element when its keyboard focused.
- Style an element when it doesn’t have the
required
attribute.
:required
- Style an element when it does have the
required
attribute.
- Style an element when its contents are a acceptable (email, url, pattern, etc.)
:invalid
- Style an element when its contents are not acceptable.
- Style a checkbox or radio button when it is selected.
:disabled
- Style an input when it has the
disabled
attribute.
- Style an element when it doesn’t have the
disabled
attribute.
:in-range
- Style a
number
orrange
when the selected value is within themin
andmax
.
- Style a
number
orrange
when the selected value is outside themin
andmax
.
:indeterminate
- Style a checkbox when its set to an undetermined state by JavaScript.
Examples
- Radio button group
Html Forms Cheat Sheet Template
Forms, forms, forms: so often overlooked in design. In this post, we are pleased to release the Form Design Cheat Sheet, created by Joe Leech and released for Smashing Magazine and its readers. This crib sheet contains an Omnigraffle template, as well as Photoshop (PSD) and PDF examples for you to download and use as you wish. Print out the sheet, stick it to your wall, send it to clients, and just generally help make everyone’s forms a bit better.
The designers of the crib sheet have spent years designing and testing forms, and they’ve decided to summarize the most common problems and issues that come up in their projects.
As usual, this goodie is absolutely free to use in private and commercial projects. The crib sheet is released under a Creative Commons license.
Form Design Cheat Sheet: Full preview
Features
The crib sheet presents best practices for a variety of Web form issues:
- Variety of fields (simple, optional, etc.);
- Layout and examples;
- Page-level error handling;
- Password strength;
- Currency values;
- Inline validation;
- Buttons.
Html Form Cheat Sheet Pdf
Download The Crib Sheet For Free
The crib sheet is released under a Creative Commons license. You can use it in all of your projects for free and without any restrictions. Please link to this article if you would like to spread the word. You may modify the theme as you wish. We know you’ll find it useful in your next project!
![Html Forms Cheat Sheet Html Forms Cheat Sheet](/uploads/1/3/7/3/137336040/226044670.jpg)
- Large preview (PNG, 1.9 MB)
- Download the compressed package (ZIP, 0.7 MB)
- The release notes on the developer’s website
Thank you, guys. We appreciate your work and your good intentions!
Html Formatting Cheat Sheet
Further Reading on SmashingMag:
Fantasy Football Cheat Sheet
(al) (fi) (il)