Skip to main content

HTML Forms

HTML forms are integral for user interaction on the web. They allow users to input data and interact with web applications. Below, we'll cover various aspects and attributes related to HTML forms.

Form Structure​

Forms are enclosed within <form> tags and consist of various input elements.

<form action="/submit-form.php" method="post">
  <!-- Form fields will be here -->
</form>

Action Attribute​

The action attribute specifies where to send the form-data when submitted.

Method Attribute​

The method attribute defines the HTTP method for sending form-data.

Input Elements​

Input elements are fundamental for gathering user input.

Text Input​

<input type="text" name="username" />

Password Input​

<input type="password" name="password" />

Checkbox Input​

<input type="checkbox" name="subscribe" value="1" />

Radio Input​

<input type="radio" name="gender" value="male" />
<input type="radio" name="gender" value="female" />

File Input​

<input type="file" name="file" />

Select Dropdowns​

Select elements are used for dropdown lists.

<select name="country">
  <option value="usa">United States</option>
  <option value="uk">United Kingdom</option>
</select>

Multiple Selection​

<select name="colors" multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
</select>

Buttons​

Buttons trigger actions within forms.

Submit Button​

<button type="submit">Submit</button>

Reset Button​

<button type="reset">Reset</button>

Custom JavaScript Action​

<button onclick="myFunction()">Click me</button>

Form Attributes​

Various attributes enhance the functionality of forms.

Name Attribute​

The name attribute identifies form data when submitted.

Value Attribute​

The value attribute sets initial values for input fields.

Required Attribute​

<input type="text" name="fullname" required />

Placeholder Attribute​

<input type="text" name="username" placeholder="Enter your username" />

Disabled Attribute​

<input type="text" name="city" disabled />

Form Layout​

Proper layout enhances form usability and aesthetics.

Fieldset and Legend​

<fieldset>
  <legend>Contact Information</legend>
  <!-- Form fields here -->
</fieldset>

Label Element​

<label for="username">Username:</label>
<input type="text" id="username" name="username" />

Grouping Controls​

<fieldset>
  <legend>Payment Method</legend>
  <!-- Radio buttons or other inputs -->
</fieldset>

Accessibility​

Ensuring forms are accessible is essential for users with disabilities.

Labeling Inputs​

<label for="username">Username:</label>
<input type="text" id="username" name="username" />

ARIA Roles​

<input type="text" name="search" role="searchbox" />

Conclusion​

HTML forms are versatile tools for collecting user data and interacting with web applications. Understanding the various input elements and attributes allows developers to create intuitive and user-friendly forms.