www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] intending forms

  1. #1
    Join Date
    Dec 2013
    Posts
    13

    resolved [RESOLVED] intending forms

    please look at the image and answer:

    apply.png


    how do i make the fields appear one below the other. css? if yes how ?

    Code:
     <form action="" onsubmit="return confirm('are you sure?');">
                    <!-- <fieldset> -->
                        <!-- <legend>APPLY FOR LEAVE</legend> -->
                    <p>
                        <label for="name">Name:</label>
                        <input type="text" name="name" id="name">
                    </p>
                    <br>
                    <p>
                        <label for="type">Leave Type:</label>
                        <select name="type" id="type">
                            <option value="0">casual</option>
                            <option value="1">sick</option>
                            <option value="2">leave without pay</option>
                        </select>
                    </p>
                    <p>
                        <label for="balance">Leave Balance</label>
                        <input type="number" name="balance" id="balance">
                    </p>
                    <p>
                        <label for="fromDate">From:</label>
                        <input type="date" name="fromdate" id="fromDate">
                    </p>
                    <p>
                        <label for="toDate">To:</label>
                        <input type="date" name="todate" id="toDate">
                    </p>
                    <p>
                        <label for="days">No. Of Days:</label>
                        <input type="text" name="days" id="days">
                   </p>
                    <p>
                        <select name="session1" id="session1">
                            <option value="0">Session 1</option>
                            <option value="1">Session 2</option>
                        </select>
                    </p>
                    <p>
                        <select name="session2" id="session2">
                            <option value="0">Session 1</option>
                            <option value="1">Session 2</option>
                        </select>
                    </p>
                    <p>
                        <label for="manager">Forward To/Approver:</label>
                        <input type="text" name="manager" id="manager">
                    </p>
                    <p>
                        <label for="reason">Reason:</label>
                        <textarea name="reason" id="reason" cols="30" rows="5" ></textarea>
                    </p>
                      <p>
                        <label for="contact">Contact:</label>
                        <input type="text" name="contact" id="contact">
                    </p>
                     <p>
                        <input type="submit" id="submit" value="Apply">
                    
                        <input type="reset" value="Cancel">
                    </p>
                    <!-- </fieldset> -->
                    </form>

  2. #2
    Join Date
    Oct 2013
    Location
    3rd planet from the sun
    Posts
    165

  3. #3
    Join Date
    Oct 2013
    Posts
    30
    add this CSS to your page.. if want to adjust the width, change 250px to something else you wanted.
    Code:
    label { display:inline-block; float:left; width:250px; }

  4. #4
    Join Date
    Dec 2013
    Posts
    13
    you are awesome man!. great. thanks williamsforrest. works!!!!

  5. #5
    Join Date
    Dec 2013
    Posts
    13
    Quote Originally Posted by williamforrest View Post
    add this CSS to your page.. if want to adjust the width, change 250px to something else you wanted.
    Code:
    label { display:inline-block; float:left; width:250px; }
    you are awesome man!. great. thanks williamsforrest. works!!!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles