Bits of .NET

📝 Forms = User Input

Web apps need user input. HTML forms collect data. Text, choices, files — all in one form.

📝 Form Elements

<form action="/submit" method="POST">
    <!-- Text input -->
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Enter name" required>

    <!-- Email input -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="email@example.com">

    <!-- Password input -->
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">

    <!-- Number input -->
    <label for="age">Age:</label>
    <input type="number" id="age" name="age" min="1" max="120">

    <!-- Textarea -->
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4" cols="50"></textarea>

    <!-- Select dropdown -->
    <label for="country">Country:</label>
    <select id="country" name="country">
        <option value="">Select a country</option>
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="ca">Canada</option>
    </select>

    <!-- Radio buttons -->
    <fieldset>
        <legend>Gender:</legend>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Male</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label>
        <input type="radio" id="other" name="gender" value="other">
        <label for="other">Other</label>
    </fieldset>

    <!-- Checkboxes -->
    <fieldset>
        <legend>Interests:</legend>
        <input type="checkbox" id="sports" name="interests" value="sports">
        <label for="sports">Sports</label>
        <input type="checkbox" id="music" name="interests" value="music">
        <label for="music">Music</label>
        <input type="checkbox" id="reading" name="interests" value="reading">
        <label for="reading">Reading</label>
    </fieldset>

    <!-- File upload -->
    <label for="file">Upload file:</label>
    <input type="file" id="file" name="file" accept=".jpg,.png,.pdf">

    <!-- Date input -->
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday">

    <!-- Range slider -->
    <label for="rating">Rating:</label>
    <input type="range" id="rating" name="rating" min="1" max="5" value="3">

    <!-- Submit button -->
    <input type="submit" value="Submit">
    
    <!-- Reset button -->
    <input type="reset" value="Reset">
    
    <!-- Button -->
    <button type="button" onclick="alert('Clicked!')">Click Me</button>
</form>

🎯 Form Attributes

<form
    action="/submit"          <!-- Where to send -->
    method="POST"             <!-- GET or POST -->
    enctype="multipart/form-data" <!-- For file uploads -->
    autocomplete="on"         <!-- Browser autocomplete -->
    novalidate                  <!-- Disable HTML5 validation -->
    target="_blank"          <!-- Where to open result -->
>

<input
    type="text"
    name="username"
    value="John"
    placeholder="Enter username"
    required                <!-- Required field -->
    readonly               <!-- Read only -->
    disabled               <!-- Disabled -->
    maxlength="20"        <!-- Max characters -->
    min="1"               <!-- Min value -->
    max="100"             <!-- Max value -->
    pattern="[A-Za-z]+"   <!-- Regex pattern -->
    autofocus              <!-- Auto focus -->
>

💡 Best Practices

• Use labels for accessibility
• Group related fields with fieldset
• Use appropriate input types
• Validate on client and server
• Sanitize user input on server