Concepts 🚀 Project 🧮 Labs
📚 Learn / Frontend / HTML forms & inputs

HTML forms & inputs

<form> collects user input. input, textarea, select, button — name attribute becomes the form field key.

Code example

<form method='post' action='/signin' enctype='multipart/form-data'>
  <input type='text' name='username' placeholder='Name'>
  <input type='number' name='id' placeholder='ID'>
  <input type='file' name='file'>
  <button type='submit'>Login</button>
</form>

How it works

A <form> wraps input controls and sends them to the server on submit. Each input's name= attribute becomes the key in the submitted payload. method='post' sends the data in the request body (use POST for anything that changes server state). enctype='multipart/form-data' is required when the form contains a file input — it lets the browser send binary data as multi-part chunks. Without it, file uploads silently fail. Use <label for='id'> to bind text to inputs for accessibility. The input types (text, email, number, date, file, password, checkbox, radio) trigger different keyboards on mobile and different validation rules.

🔍 Where this is used in OpenBenchML templates/login.html, register.html, upload.html, competition_form.html — every form follows this pattern.