Form

Form

Title

Form Text



    
        <div class="form">
            <p class="title">Title</p>
            <p>Form Text</p>
            <form action="" method="POST">
                <input class="input-1" type="text" aria-label="Full Name" name="Full Name" placeholder="Full Name"
                    required>
                <input type="tel" class="input-1" aria-label="Phone Number" name="Phone Number"
                    placeholder="Phone Number" required>
                <input type=“text” placeholder="Email Address" aria-label="Email Address" name="email" required>
                <textarea name="Message" placeholder="Write Your Message Here" aria-label="Message" required></textarea>
                <button class="button" type="submit" aria-label="submit" value="button">Submit</button>
            </form>
        </div>
    



Checkboxes Example

    
            <div>
                <label>How Would You Like To Be Contacted?</label>
                <p>Check all that apply.</p>
                <div>
                    <input type="checkbox" id="Phone" name="How Would You Like To Be Contacted?" value="Phone">
                    <label for="Phone">Phone</label>
                </div>
                <div>
                    <input type="checkbox" id="Email" name="How Would You Like To Be Contacted?" value="Email">
                    <label for="Email">Email</label>
                </div>
            </div>
    



Select State Option

    
            <div>
                <label for="usstates">US States <span>*</span></label>
                <select name="US State" id="usstates" aria-invalid="false" aria-labelledby="usstates">
                    <option value="Please Select" selected="selected" disabled>Please Select</option>
                    <option value="AL">Alabama</option>
                    <option value="AK">Alaska</option>
                    <option value="AZ">Arizona</option>
                    <option value="AR">Arkansas</option>
                    <option value="CA">California</option>
                    <option value="CO">Colorado</option>
                    <option value="CT">Connecticut</option>
                    <option value="DE">Delaware</option>
                    <option value="FL">Florida</option>
                    <option value="GA">Georgia</option>
                    <option value="HI">Hawaii</option>
                    <option value="ID">Idaho</option>
                    <option value="IL">Illinois</option>
                    <option value="IN">Indiana</option>
                    <option value="IA">Iowa</option>
                    <option value="KS">Kansas</option>
                    <option value="KY">Kentucky</option>
                    <option value="LA">Louisiana</option>
                    <option value="ME">Maine</option>
                    <option value="MD">Maryland</option>
                    <option value="MA">Massachusetts</option>
                    <option value="MI">Michigan</option>
                    <option value="MN">Minnesota</option>
                    <option value="MS">Mississippi</option>
                    <option value="MO">Missouri</option>
                    <option value="MT">Montana</option>
                    <option value="NE">Nebraska</option>
                    <option value="NV">Nevada</option>
                    <option value="NH">New Hampshire</option>
                    <option value="NJ">New Jersey</option>
                    <option value="NM">New Mexico</option>
                    <option value="NY">New York</option>
                    <option value="NC">North Carolina</option>
                    <option value="ND">North Dakota</option>
                    <option value="OH">Ohio</option>
                    <option value="OK">Oklahoma</option>
                    <option value="OR">Oregon</option>
                    <option value="PA">Pennsylvania</option>
                    <option value="RI">Rhode Island</option>
                    <option value="SC">South Carolina</option>
                    <option value="SD">South Dakota</option>
                    <option value="TN">Tennessee</option>
                    <option value="TX">Texas</option>
                    <option value="UT">Utah</option>
                    <option value="VT">Vermont</option>
                    <option value="VA">Virginia</option>
                    <option value="WA">Washington</option>
                    <option value="WV">West Virginia</option>
                    <option value="WI">Wisconsin</option>
                    <option value="WY">Wyoming</option>
                    <option value="DC">Washington DC</option>
                    <option value="AE">ARMED FORCES AFRICA \ CANADA \ EUROPE \ MIDDLE EAST</option>
                    <option value="AA">ARMED FORCES AMERICA (EXCEPT CANADA)</option>
                    <option value="AP">ARMED FORCES PACIFIC</option>
                </select>
            </div>
    



Disclaimer Box

    
            <label class="disc" aria-label="I have read the disclaimer">
                <input type="checkbox" aria-label="I Have Read The Disclaimer" name="I Have Read The Disclaimer" value="Yes" required>
                <p>I Have Read The Disclaimer *</p>
            </label>
    



Form with Upload Attachment



    
        add:
        
        accept-charset="utf-8" enctype="multipart/form-data"
         
        to form tag line 

        Example:

        <form action="" method="POST" accept-charset="utf-8" enctype="multipart/form-data">
        
Put this input section where the attachment will be going <label class="custom-file-upload"> <input onchange="showname()" id="file" accept="image/jpeg,image/gif,image/png,application/pdf,image/x-eps" name="Attachment" type="file"> <span id="image-upload">Attach Your Files <img src="/assets/images/upload.svg" class="upload ic" alt="attach file"></span> </label>
<script> function showname() {document.getElementById('image-upload').innerHTML = document.getElementById('file').files[0].name}; </script>



Other examples in html