The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> I need help with html forms
Ehman
post Oct 19 2021, 02:40 PM
Post #1





Group: Members
Posts: 1
Joined: 19-October 21
Member No.: 28,148



Im having trouble getting the text in the right area. The first image is what im trying to do and the other is what mine looks like

here is my code

CODE
<!DOCTYPE html>
<html lang="en">

<head>

</head>

<style>

    body {

        background-color: #aed9e5;

    }

    form {

        font-family: Arial, Helvetica, sans-serif;
        padding: 20px;

    }

    label {

        margin-top: 5px;
        display: block;
        float: left;
        clear: left;
        text-align: right;
        padding-right: 10px;
        width: 150px;

    }

    input {

        margin-top: 5px;
        float: left;

    }

</style>

<body>
    <section>
        <form>
            <label>Select Event:</label>
                <input type="radio" id="stock" name="select_event" value="stock">
            <label for="stock" id="stocklabel">Stock</label>
                <input type="radio" id="modified" name="select_event" value="modified">
            <label for="modified" id="modlabel">Modified</label>


            <label>Last Name:</label>
                <input type="text" id="last_name" name="last_name">

            <label>First Name:</label>
                <input type="text" id="first_name" name="first_name">

            <label>Address:</label>
                <input type="text" id="address" name="address">

            <label>City:</label>
                <input type="text" id="city" name="city">

            <label>Province:</label>
                <select id="province" name="province">
                    <option value="" selected disabled hidden>--</option>
                    <option value="AB">AB</option>
                    <option value="BC">BC</option>
                    <option value="MB">MB</option>
                    <option value="NB">NB</option>
                    <option value="NS">NS</option>
                    <option value="ON">ON</option>
                    <option value="PE">PE</option>
                    <option value="QC">QC</option>
                    <option value="SK">SK</option>
                </select>

            <label>Postal Code:</label>
                <input type="text" id="postal_code" name="postal_code">

            <label>Country:</label>
                <input type="text" id="country" name="country">

            <label>Email:</label>
                <input type="email" id="email" name="email">

            <label>Date of Birth:</label>
                <input type="date" id="date_of_birth" name="date_of_birth">

            <label id="gender">Gender:</label>
                <input type="radio" id="male" name="male" value="male">
            <label for="stock">Male</label>
                <input type="radio" id="female" name="female" value="female">
            <label for="modified">Female</label>
                <input type="radio" id="other" name="other" value="other">
            <label for="modified">Other</label>

            <label>Boat Name:</label>
                <input type="text" id="boat_name" name="boat_name">

            <label>Comments:</label>
                <input type="text" id="comments" name="comments">

            <label>I agree to the waver</label>
                <input type="checkbox" id="checkbox" name="checkbox">
            <label>Yes</label>

                <input type="submit" id="submit" name="submit" value="submit">
        </form>

    </section>
</body>

</html>

<!-- aed9e5 -->


Attached thumbnail(s)
Attached Image Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 19 2021, 02:57 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



For the first two form controls you've put the label after the input rather than before it as you've done in the other cases.

Then, the SELECT bubbles up because you haven't included it in your float scheme. Add select as a selector for the rule you already have for input. E.g....

CODE
input, select {
    margin-top: 5px;
    float: left
    }


That should do it.

Also, unless HTML 5 have changed that too, you shouldn't use LABEL as you've done here...
CODE
<label>Select Event:</label>

...since that label isn't connected to a form control, but is more of a heading for a group of controls.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 19 2021, 06:48 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Oh I'm sorry! I didn't look close enough at your mockup. You want the labels for the first two controls to the right. That complicates things. I have to think a little.

What I said about the SELECT is still true though.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 19 2021, 07:23 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



OK, this seems to work. Part of it is that for those first two controls the labels needs to have the styling the other inputs have and the inputs need to to have the styling the other labels have. Because the inputs are to the left there.

I'd use formgroup and legend to get the caption for the radio buttons. The legend is normally above the formgroup, so it takes a little positioning to get it down. Then width won't work with radio buttons so a few more tricks are needed, but I think I got it all.

Change the part of the form with the radio buttons and their caption like this.

HTML
<formgroup>
<legend>Select Event:</legend>
<input type="radio" id="stock" name="select_event" value="stock"><label for="stock" id="stocklabel">Stock</label>
<input type="radio" id="modified" name="select_event" value="modified"><label for="modified" id="modlabel">Modified</label>
</formgroup>


The CSS to (hopefully) make it happen.

CODE
    body {

        background-color: #aed9e5;

    }

    form {

        font-family: Arial, Helvetica, sans-serif;
        padding: 20px;

    }

    label, legend {

        margin-top: 5px;
        display: block;
        float: left;
        clear: left;
        text-align: right;
        padding-right: 10px;
        width: 150px;
}

/* no changes above this point */




/* select added to the selector */
input, select             { margin-top: 5px;
                            float: left }


/* all new rules */
legend                   { position: relative; top: 1.3em }
  
#stock,#modified         { margin-top: 5px;
                           display: block;
                           float: left;
                           clear: left;
                           text-align: right;
                           margin-left: 160px }
        
#stocklabel, #modlabel   { clear: none;
                           text-align: left;
                           margin-top: 0;
                           padding-left: 5px }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 19 2021, 07:31 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



¡Ay caramba! Now I realize the gender bit is screwed up too. It should work to do it the same way as the two first controls. Try that. If it doesn't work, scream! happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 08:59 AM