HTML Forms
Collect user input with the form element.
Syntax
<form action="/submit" method="post"> ... </form>A form collects information from users. It is created with the <form> element, which wraps input controls.
Key form attributes
action— where the form data is sent.method— how it is sent (getorpost).
Inside the form you place inputs, labels, and a submit button.
Example
Loading editor…
Press Run to see the result.
When to use it
- A registration page uses an HTML form to collect name, email, and password from new users.
- A search bar is a single-input form that POSTs the query string to a search results page.
- A checkout page uses a form with method="post" to send payment details securely to the server.
More examples
Basic contact form
The form action specifies where data is sent; method="post" sends it in the request body.
<form action="/contact" method="post">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<label for="email">Email</label>
<input type="email" id="email" name="email">
<button type="submit">Send</button>
</form>Search form using GET method
method="get" appends form data as URL query parameters, making search results shareable as links.
<form action="/search" method="get">
<input type="search" name="q" placeholder="Search courses...">
<button type="submit">Search</button>
</form>File upload form with enctype
enctype="multipart/form-data" is required when uploading files; accept restricts selectable file types.
<form action="/upload" method="post"
enctype="multipart/form-data">
<label for="avatar">Profile photo</label>
<input type="file" id="avatar" name="avatar" accept="image/*">
<button type="submit">Upload</button>
</form>
Discussion