HTML Intermediate

HTML Forms: Creating Interactive User Input

CodingerWeb
CodingerWeb
19 views 45 min read

HTML Forms

Forms allow users to input data and interact with web applications.

Basic Form Structure

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <button type="submit">Submit</button>
</form>

Input Types

<input type="text" placeholder="Enter text">
<input type="email" placeholder="Enter email">
<input type="password" placeholder="Enter password">
<input type="number" min="1" max="100">
<input type="date">
<input type="file" accept=".jpg,.png">
<input type="checkbox" id="agree">
<input type="radio" name="gender" value="male">

Textarea and Select

<textarea name="message" rows="4" cols="50">
    Default text here...
</textarea>

<select name="country">
    <option value="">Select Country</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca">Canada</option>
</select>

Fieldset and Legend

<fieldset>
    <legend>Personal Information</legend>
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname">
    
    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lname">
</fieldset>

Form Validation

<input type="email" required>
<input type="text" pattern="[A-Za-z]{3,}" title="At least 3 letters">
<input type="number" min="18" max="99">
<input type="text" maxlength="50">