Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
HTML forms are used to collect user input. They allow users to enter data which is typically sent to a server for processing. Forms consist of <form>,<input>,<label>, and other elements.
<form>
<label>Name</label>
<input type="text">
<button>Submit</button>
</form>This example shows a simple contact form with essential elements: labels, inputs, textarea, and buttons.
Basic form with multiple input types
<h2>Simple Contact Form</h2>
<form class="contact-form">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your full name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="you@example.com" required>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" placeholder="Your message here..."></textarea>
</div>
<button type="submit" class="btn-submit">Send Message</button>
<button type="reset" class="btn-reset">Clear Form</button>
</form>Loading preview...
Well-structured forms are easier to use, maintain, and access. Group related inputs together and always associate labels with inputs.
Organized form with helper text and proper grouping
<h2>Form Structure</h2>
<form class="demo-form">
<!-- Form Groups contain label + input -->
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Choose username">
</div>
<!-- Form Group with helper text -->
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter password">
<small class="helper-text">At least 8 characters required</small>
</div>
<!-- Multiple input types -->
<div class="form-group">
<label for="age">Age</label>
<input type="number" id="age" name="age" min="18" max="120">
</div>
<!-- Form submission -->
<button type="submit" class="btn">Create Account</button>
</form>Loading preview...
<form>Container for all form elements
<input>Accepts user input (text, email, password, etc)
<label>Describes what input field is for
<textarea>Multi-line text input area
<button>Clickable button for submission or actions
<select>Dropdown list of options