An HTML form is a structured way to collect user input and send it to a server for processing. Forms are essential for enabling user interaction on web pages, such as logging in, signing up, providing feedback, or searching for information.

Key Components in Form

Form Element The <form> element serves as a container for input elements and specifies how and where to send the data.

form[action="submit.php" method="post"]

• action: Specifies the URL where the form data will be sent.
• method: Determines the HTTP method to use (GET or POST).

Lets start design a form with the few common input types. Create file under src named form.html.

Used for single-line text.

input:text[name="username" placeholder="Enter your name"]

Used for secure input (hides characters).

input:password[name="password" placeholder="Enter your password"]

Validates an email address.

input:email[name="email" placeholder="Enter your email"]

Allows only numeric input.

input:number[name="age" min="1" max="100"]

Used for selecting one option from a group.

label>input:radio[name="gender" value="male"]{ Male}^^label>input:radio[name="gender" value="female"]{ Female}

Used for selecting one or more options.

label>input:checkbox[name="subscribe" value="newsletter"]{ Subscribe to Newsletter}

Allows the user to choose one option from a dropdown menu.

select[name="country"]>option[value="us"]{United States}+option[value="uk"]{United Kingdom}

Allows the user to choose more than one option from a list menu.

label[for="cars"]{Choose a car:}+select[name="cars" multiple]>option[value="volvo"]{Volvo}+option[value="saab"]{Saab}+option[value="opel"]{Opel}+option[value="audi"]{Audi}

For multi-line text input.

textarea[name="message" rows=4 cols=50 placeholder="Enter your message"]

Allows users to upload a file.

input:file[name="profile_picture"]

Creates a clickable button that does nothing by default

button[type=button]{Click Me}

Used to submit the form data.

input:submit[value=Submit]

Resets all form fields to their default values.

input:reset[value=Reset]

HTML Form Example

html:5>head>meta:charset+meta:vp+title{HTML Form Example}^^body>h1{Contact Us}+form[action="/submit" method="post"]>(label[for="name"]{Name:}+input:text#name[name="name" required]+br*2+label[for="email"]{Email:}+input:email#email[name="email" required]+br*2+p{Gender:}+label>input:radio[name="gender" value="male"]+{ Male}^^label>input:radio[name="gender" value="female"]+{ Female}+br*2+label[for="country"]{Country:}+select#country[name="country"]>option[value="us"]{United States}+option[value="uk"]{United Kingdom}+option[value="in"]{India}^^br*2+label[for="message"]{Message:}+br+textarea#message[name="message" rows="5" cols="40"]^^br*2+input:submit[value="Submit"])

action

• Specifies the URL where the form data is sent.
• Example: action="/submit.php"

method

• Defines the HTTP method:
  • GET: Appends form data to the URL (visible in the address bar).
  • POST: Sends data in the HTTP request body (more secure).

enctype

• Specifies the encoding type for form data:
  • application/x-www-form-urlencoded (default for text data).
  • multipart/form-data (used for file uploads).

autocomplete

• Enables or disables the browser’s autofill feature.
• Example: autocomplete="on" or autocomplete="off"

target

• Specifies where to display the response:
  • _self: Default, opens in the same window.
  • _blank: Opens in a new tab or window.

HTML provides built-in validation for form inputs to ensure data accuracy:

required: Ensures the field is not left empty.

 input:text[name="name" required]

min and max: Specifies numeric range.

input:number[name=age min=1 max=100]

pattern: Validates input against a regular expression.

input:text[name=username pattern="[a-zA-Z0-9]+" title="Only letters and numbers allowed."]

maxlength and minlength: Limits the number of characters.

input:text[name=username minlength=5 maxlength=10]

Lets build login form that gets user credentials and invoke login action upon submit

div.login-container>h2{Login}+form>label[for="username"]{Username}+input#username[name="username" type="text" required]+label[for="password"]{Password}+input#password[name="password" type="password" required]+button[type="submit"]{Login}