HTML form elements, with working code.
Every element below ships a live demo, copy-paste code, an attribute table, and a form that actually submits to a free backend. No static snippets — these forms work the moment you paste them.
HTML Form
An HTML form is created with the <form> element and collects user input through controls like <input>, <textarea>, and <select>. It sends that data to a server using the action URL and an HTTP method (usually POST). Below is a complete, working form you can copy — it submits to a free backend, no server required.
Read & copy →HTML Input
The <input> element is HTML's one-line form control, and its type attribute decides what it collects: text, email, tel, number, date, checkbox, file and more. Each type brings its own browser validation, mobile keyboard and submitted value format, all listed in the table below. An input is only submitted if it has a name.
Read & copy →HTML Textarea
The <textarea> element is a multi-line text input, used for messages, comments, and anything longer than a single line. Unlike <input>, it has opening and closing tags and a size set by rows and cols. Below is a working contact form with a message textarea that actually submits.
Read & copy →HTML Radio Button
A radio button is an <input type="radio"> that lets a user pick exactly one option from a group. Radio buttons are linked into a group by sharing the same name= attribute; only the selected option's value is submitted. Below is a working form with a radio group that actually submits.
Read & copy →HTML Select (Dropdown)
The <select> element is a dropdown menu built from <option> tags. The user picks one (or, with the multiple attribute, several) and the chosen option's value is submitted under the select's name. Below is a working form with a dropdown that actually submits.
Read & copy →HTML Button
The <button> element is a clickable control. Inside a form its type= attribute decides what it does: submit sends the form, reset clears it, and button does nothing on its own (use it for JavaScript). The default type is submit, which surprises people. Below is a working form whose submit button actually sends data.
Read & copy →HTML File Input (Upload)
To upload a file with HTML, put <input type="file" name="file"> inside a <form method="post" enctype="multipart/form-data">; without that enctype, only the filename is sent. Add accept (for example .pdf,image/*) to filter the picker and multiple to allow several files. The browser sends the bytes to the form's action URL, so a server or form backend must receive and store them.
Read & copy →HTML Label
A <label> connects a text caption to a form control. Linked with the for attribute (matching the control's id), it makes the field clickable, accessible to screen readers, and easier to tap on mobile. Below is a working form where every field has a proper label.
Read & copy →HTML Fieldset & Legend
A <fieldset> groups related form controls together, and a <legend> inside it provides a caption for the group. It's the accessible way to label a set of radio buttons or checkboxes, and disabling a fieldset disables every control inside it at once.
Read & copy →HTML Checkbox
A checkbox is an <input type="checkbox"> for an on/off choice. When checked it submits name=value, or name=on if it has no value attribute; when unchecked it submits nothing at all, not even its name. Give several boxes the same name to collect multiple answers. Below is a working form with checkboxes.
Read & copy →HTML Date Input
<input type="date"> shows the browser's native date picker and always submits the value as yyyy-mm-dd (ISO 8601), whatever display format the user sees. Its siblings work the same way: time sends HH:mm, datetime-local sends yyyy-mm-ddTHH:mm, month sends yyyy-mm and week sends yyyy-Www. None of them includes a time zone.
Read & copy →HTML Required Attribute
The required attribute makes a form control mandatory: the browser blocks submission and shows a message until the control has a value. It is a usability check, not security, because anyone can POST without it.
Read & copy →HTML Form Action
The action attribute on a <form> tells the browser where to send the submitted data — a server URL or a form-backend endpoint. Omit it and the form submits back to the current page. Test it below, or read the [complete guide to the HTML form action attribute](/blog/html-form-action-complete-guide) for every value and fix.
Read & copy →HTML Form Method (GET vs POST)
The method attribute decides how a form sends its data. GET appends it to the action URL as a query string (for searches and filters); POST puts it in the request body (for contact, registration, and anything sensitive or large). Use POST for real submissions.
Read & copy →Looking for a ready-made form? See the form templates or the free HTML drop-in.
Ship a working form in under a minute.
Grab a free access key, paste one endpoint into any element above, and start collecting submissions — 500 free to start, spam-filtered, no server code.