I need help with html forms |
I need help with html forms |
Ehman |
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) |
pandy |
Oct 19 2021, 02:57 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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. |
pandy |
Oct 19 2021, 06:48 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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. |
pandy |
Oct 19 2021, 07:23 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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 } |
pandy |
Oct 19 2021, 07:31 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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!
|
Lo-Fi Version | Time is now: 19th April 2024 - 06:29 AM |