HTML form

Loading…

All tools › Blocks of markup

HTML form

A form from a list of fields, each with its label, its keyboard and its rules.

It runs entirely in this browser tab: nothing you type is uploaded, and the tool makes no network request at all — it does not fetch the address you gave it. Open your browser's network panel and try it.

What it takes

One field on each line: name: kind, rules, label.

An example

name: text, required, Your name
email: email, required, Email address
quantity: number, min=1 max=24, How many loaves
message: textarea, , Anything else
collection: select, Tuesday|Thursday|Saturday, Collection day
terms: checkbox, required, I have read the terms

Settings

Where it is sent
Left empty, the form posts back to the page it is on.
How it is sent
Choices: POST, GET.
Write the labels
Without a label a field has no name a screen reader can read.
Group the fields
A group a screen reader announces before its fields.
Button
Say what pressing it does, not "submit".

How to use it

  1. Paste your text into the box above, or open a file.
  2. Adjust the settings beside it until the result is what you wanted.
  3. Copy the result, or save it as a file. The result updates as you type.

Questions

Does it fetch the address I give it?
No, and that is the difference between these tools and most with the same names. Nothing is downloaded, nothing is checked over the network, and no request leaves this page. What is described is the text you handed over. Every tool that could be mistaken for a fetching one says so on its own result.
Is a length count here a rule?
No. The widths shown are what each search engine and each social network happens to display, and they are cut by pixels rather than by characters — a line of capitals is cut sooner than a line of lower case. There is no maximum title or description length in any specification, and nothing here pretends otherwise.
Will this configuration work on my server?
It is written to the syntax the server you chose reads, and every rule carries a comment saying what it does. Check the whole file before reloading: a rule that needs a module you have not enabled stops the server starting, and the certificate paths in an Nginx block are the usual ones rather than yours.
Why does a policy tool warn about my own settings?
Because a rule that blocks the site is worth more than a rule that works. A content security policy that allows inline scripts undoes most of what it is for; a star with credentials is a pair every browser refuses outright; a permanent redirect is remembered by the browser and is hard to take back. Each of those is said where you can still change it.

Other tools for blocks of markup

Web app manifest
The file that makes a page installable, with the two icon sizes it actually needs.

Responsive image
An image element with a source for every width and format, and the attribute pair it is usually shipped without.

Embed code
A frame with a ratio, a title and only the permissions the embedded page needs.

HTML table
A table from a grid of text, with the header cells marked so a reader can follow them.

Links in a page
Every link in markup or Markdown, with the ones that say "click here" and the ones that go nowhere.

Breakpoint checker
Your breakpoints checked over the whole width range: the widths two rules both cover, the widths none covers, and where real devices land.

All thirty-three tools