Code icon

HTML - Forms

Links


    //FORM BASIC
    <form action="/action_page.php" method="post">
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname">
    </form>


    //FORM RADIO BUTTONS
    <form action="/action_page.php" method="post">
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label><br>
    <input type="radio" id="other" name="gender" value="other">
    <label for="other">Other</label>
    </form>
    


    //FORM FILES
    <input type="hidden" name="MAX_FILE_SIZE" value="2097152">
    <input type="file" name="curriculum" >


    //FORM CHECKBOX
    <form action="/action_page.php" method="post">
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
    <label for="vehicle1"> I have a bike</label><br>
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
    <label for="vehicle2"> I have a car</label><br>
    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
    <label for="vehicle3"> I have a boat</label>
    </form>


    //FORM INPUT TYPES
    <input type="button">
    <input type="checkbox">
    <input type="color">
    <input type="date">
    <input type="datetime-local">
    <input type="email">
    <input type="file">
    <input type="hidden">
    <input type="image">
    <input type="month">
    <input type="number">
    <input type="password">
    <input type="radio">
    <input type="range">
    <input type="reset">
    <input type="search">
    <input type="submit">
    <input type="tel">
    <input type="text">
    <input type="time">
    <input type="url">
    <input type="week">


    //OTHERS
    <input type="text" id="fname" name="fname" value="John" disabled>
    <input type="text" id="fname" name="fname" value="John" readonly>
    <input type="text" id="fname" name="fname" size="50">
    <input type="text" id="pin" name="pin" maxlength="4" size="4">
    <input type="date" id="datemax" name="datemax" max="1979-12-31">
    <input type="file" id="files" name="files" multiple>
    <input type="text" id="country_code" name="country_code"  pattern="[A-Za-z]{3}" title="Three letter country code">
    <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
    <input type="text" id="username" name="username" required>
    <input type="number" id="points" name="points" step="3">
    <input type="text" id="fname" name="fname" autofocus>
    <input type="email" id="email" name="email" autocomplete="off">

    <form>
        <input list="browsers">
        <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
        </datalist>
    </form>