I have written a form in HTML and CSS. When i apply the display: inline-block property, some of the text goes to the next line, even though I am not using the <br/> tag. I also tried increasing the width of the fieldset element, but nothing changed.
My code:
fieldset {
background: lightyellow;
border: 10px solid yellow;
margin-bottom: 10px;
width: 720px;
}
label {
width: 180px;
display: inline-block;
text-align: right;
vertical-align: top;
}
#imp {
width: auto;
}
.imp {
text-align: center;
}
.imp {
text-align: right;
vertical-align: top;
}
<body>
<h1>Please Enter Your Details For Our Dating Website</h1>
<fieldset>
<legend>Your Face</legend>
<label for="image">Your Image:</label>
<input type="file" name="image" required id="image">
<br>
<label for="preview">Image Preview:</label>
<img id="preview" id="preview">
<br>
</fieldset>
<br>
<fieldset>
<legend>Your General Details</legend>
<label for="name">Name:</label>
<input type="text" placeholder="Your full name" name="name" id="name">
<br>
<label for="gender">Gender:</label>Male
<input type="radio" name="gender" value="male" id="gender">Female
<input type="radio" name="gender" name="female">
<br>
<label for="age">Age:</label>
<input type="number" id="age">
<br>
<label for="dob">Date of birth:</label>
<input type="date" id="dob">
<br>
<label for="color">Favorite color:</label>
<input type="color" id="color">
<br>
<label for="country">Which country:</label>
<select name="country" id="country">
<option value=""></option>
<option value="india">India</option>
<option value="china">China</option>
<option value="japan">Japan</option>
<option value="koria">Koria</option>
<option value="australia">Australia</option>
</select>
<br>
</fieldset>
<br>
<fieldset>
<legend>Your Indicators</legend>
<label for="height">Height:</label><span class="imp"> Short</span>
<input id="height " type="range" min="0" max="100" name="height"><span class="imp"> Tall<span><br>
<label for = "salary">Salary: </label><span class = "imp"> Poor</span>
<input id="salary " type="range" min="0" max="100" name="salary"><span class="imp"> Rich<span>
</fieldset>
<br>
<fieldset>
<legend>Your Contact Information</legend>
<label for = "email">Email: </label><input type = "email" name = "email"><br>
<label for = "mobile">Mobile: </label><input type = "tel" name = "telephone"><br>
<label for = id = "address">Address: <textarea name = "address" placeholder = "Input your address here." width = "360px" height = "50px"></textarea><br>
<label for = "contact" id = "imp">Method to contact you: </label>
<input id = "contact" type = "checkbox" name = "e_chat" value = "email">Email
<input id = "contact" type = "checkbox" name = "whatsapp" value = "whatsapp">Whatsapp
<input id = "contact" type = "checkbox" name = "in_app" value = "in_app">In-app chat
</fieldset>
<br><br>
<input type = "submit" value = "Submit"/>
</body>
Your have forgotten to close the label tag in your textarea text.
fieldset {
background: lightyellow;
border: 10px solid yellow;
margin-bottom: 10px;
width: 720px;
}
label {
width: 180px;
display: inline-block;
text-align: right;
vertical-align: top;
}
#imp {
width: auto;
}
.imp {
text-align: center;
}
.imp {
text-align: right;
vertical-align: top;
}
<body>
<h1>Please Enter Your Details For Our Dating Website</h1>
<fieldset>
<legend>Your Face</legend>
<label for="image">Your Image:</label>
<input type="file" name="image" required id="image">
<br>
<label for="preview">Image Preview:</label>
<img id="preview" id="preview">
<br>
</fieldset>
<br>
<fieldset>
<legend>Your General Details</legend>
<label for="name">Name:</label>
<input type="text" placeholder="Your full name" name="name" id="name">
<br>
<label for="gender">Gender:</label>Male
<input type="radio" name="gender" value="male" id="gender">Female
<input type="radio" name="gender" name="female">
<br>
<label for="age">Age:</label>
<input type="number" id="age">
<br>
<label for="dob">Date of birth:</label>
<input type="date" id="dob">
<br>
<label for="color">Favorite color:</label>
<input type="color" id="color">
<br>
<label for="country">Which country:</label>
<select name="country" id="country">
<option value=""></option>
<option value="india">India</option>
<option value="china">China</option>
<option value="japan">Japan</option>
<option value="koria">Koria</option>
<option value="australia">Australia</option>
</select>
<br>
</fieldset>
<br>
<fieldset>
<legend>Your Indicators</legend>
<label for="height">Height:</label><span class="imp"> Short</span>
<input id="height " type="range" min="0" max="100" name="height"><span class="imp"> Tall<span><br>
<label for = "salary">Salary: </label><span class = "imp"> Poor</span>
<input id="salary " type="range" min="0" max="100" name="salary"><span class="imp"> Rich<span>
</fieldset>
<br>
<fieldset>
<legend>Your Contact Information</legend>
<label for = "email">Email: </label><input type = "email" name = "email"><br>
<label for = "mobile">Mobile: </label><input type = "tel" name = "telephone"><br>
<label for ="address">Address:</label> <textarea name = "address" placeholder = "Input your address here." width = "360px" height = "50px"></textarea><br>
<label for = "contact" id = "imp">Method to contact you: </label>
<input id = "contact" type = "checkbox" name = "e_chat" value = "email">Email
<input id = "contact" type = "checkbox" name = "whatsapp" value = "whatsapp">Whatsapp
<input id = "contact" type = "checkbox" name = "in_app" value = "in_app">In-app chat
</fieldset>
<br><br>
<input type = "submit" value = "Submit">
</body>
First thing, make sure you close the following tag. That seems to be causing some problems.
Change it from this:
<label id="address">
To this:
<label id="address"></label>
Related
i'm a french begginer (so excuse the fact that some part of it are in french, if it's a problem i can translate, also i know my code can be more clean so if you have any idea dont hesitate!).
I'm coding a form for a project and i would like to align all my text like this :
but my page look like this for the moment :
fieldset {
width: 900px;
}
em {
color: red;
}
#demande {
height: 200px;
width: 800px;
background-color: #EAEAEA;
}
placeholder {
text-align: top;
}
strong {
color: #C1D58D;
}
input {
margin-left: 100px;
}
<fieldset>
<legend><b>INFORMATIONS PERSONNELLES</b></legend>
<form method="get">
<label for "Nom">Nom<em>*</em> :</label>
<input type="text" name="Nom" id="text" required />
</form>
</br>
</br>
<form method="get">
<label for "Prénom">Prénom<em>*</em> :</label>
<input type="text" name="Prénom" id="text" required />
</form>
</br>
</br>
<form method="get">
<form method="get">
<label><strong> Votre sexe</strong><em>*</em> :</label> </br>
<input type="radio" name="Sexe" id="Fille" /> <label for="Fille">Fille</label>
<input type="radio" name="Sexe" id="Garçon" /> <label for="Garçon">Garçon</label>
<input type="radio" name="Sexe" id="Autre" /> <label for="Autre">Autre</label>
</form>
</br>
</br>
<label> Année<em>*</em> :</label>
<input type="number" name="Année" id="Année" placeholder="Exemple : 1987" />
</form>
</br>
</br>
<form method="get">
<label for "pays"> Pays<em>*</em> :</label>
<select name="pays" id="pays" required>
<optgroup label="Europe">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="royaume-uni">Royaume-Uni</option>
<option value="italie">Italie</option>
</optgroup>
<optgroup label="Amérique">
<option value="canada">Canada</option>
<option value="etats-unis">États-Unis</option>
</optgroup>
<optgroup label="Asie">
<option value="chine">Chine</option>
<option value="japon">Japon</option>
</optgroup>
</select>
</br>
</br>
</form>
<h3>Les champs marqués par <em>*</em> sont obligatoires</h3>
</fieldset>
</br>
<form method="get">
<input type="submit" name="Envoyer" value="Annuler" />
<input type="submit" name="Envoyer" value="Envoyer" />
</form>
```
i know i could creat an id for every then edit it with css but i was wondering if there was a best way to do it (a more efficient way)
One easy solution is the use of CSS-Grid. I removed the form tags so that all elements are direct children of the fieldset.
As such I can declared fieldset { display: grid; } to apply the grid.
Next I apply a 2 column layout where the first column takes as much space as needed and the second column the remaining space with: fieldset { grid-template-columns: min-content auto;.
To space the elements apart, you can use the grid-gap-property.
fieldset {
max-width: 900px;
display: grid;
grid-template-columns: min-content auto;
gap: 10px;
}
em {
color: red;
}
fieldset h3 {
grid-column: span 2;
}
<fieldset>
<legend><b>INFORMATIONS PERSONNELLES</b></legend>
<label for "Nom">Nom<em>*</em> :</label>
<input type="text" name="Nom" id="text" required />
<label for "Prénom">Prénom<em>*</em> :</label>
<input type="text" name="Prénom" id="text" required />
<label><strong> Votre sexe</strong><em>*</em> :</label>
<div class="radio-group">
<input type="radio" name="Sexe" id="Fille" /> <label for="Fille">Fille</label>
<input type="radio" name="Sexe" id="Garçon" /> <label for="Garçon">Garçon</label>
<input type="radio" name="Sexe" id="Autre" /> <label for="Autre">Autre</label>
</div>
<label> Année<em>*</em> :</label>
<input type="number" name="Année" id="Année" placeholder="Exemple : 1987" />
<label for "pays"> Pays<em>*</em> :</label>
<select name="pays" id="pays" required>
<optgroup label="Europe">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="royaume-uni">Royaume-Uni</option>
<option value="italie">Italie</option>
</optgroup>
<optgroup label="Amérique">
<option value="canada">Canada</option>
<option value="etats-unis">États-Unis</option>
</optgroup>
<optgroup label="Asie">
<option value="chine">Chine</option>
<option value="japon">Japon</option>
</optgroup>
</select>
<h3>Les champs marqués par <em>*</em> sont obligatoires</h3>
</fieldset>
<form method="get">
<input type="submit" name="Envoyer" value="Annuler" />
<input type="submit" name="Envoyer" value="Envoyer" />
</form>
I would like the labels for the inputs to be the same width allowing the inputs and labels to be like a table.
Kind of like two columns: 1 for the labels and 1 for the inputs
Code So Far:
th, td, table{border: 2px solid black;
border-collapse: collapse;
}
th, td{width: 100px}
table{width: 100%;
text-align: center;}
body{font-family: "Bradley's Hand", cursive;}
.label{display: inline-block;
width: 100px}
input{width: 200px;}
<body>
<h1>Add Transactions</h1>
<fieldset>
<legend>Use This Form To Add Transactions</legend>
<form action="add.php" method="post">
<label class="label" for="date">Transaction Date: </label>
<input type="date" name="date" required>
<br>
<br>
<label class="label" for="amount">Transaction Amount: </label>
<input type="number" name="amount" required>
<br>
<br>
<label class="label" for="merchant">Merchant: </label>
<select name="merchant" required>
<option value="" disable selected>Select One</option>
<option value="other">Other</option>
</select>
<br>
<br>
<label class="label" for="om">Other Merchant: </label>
<input type="text" name="om">
<br><br>
<label for="type" class="label">Transaction Type: </label>
<select name="type" required>
<option value="" disable selected>Select One</option>
<option value="other">Other</option>
</select>
<br>
<br>
<label for="ot" class="label">Other Transaction Type: </label>
<input type="text" name="ot">
<br><br>
<label for="source" class="label">Source: </label>
<select name="source" required>
<option value="" disable selected>Select One</option>
<option value="other">Other</option>
</select>
<br>
<br>
<label for="os" class="label">Other Source: </label>
<input type="text" name="os">
<br>
<br>
<input type="reset">
<input type="submit" value="Save Transaction">
</form>
</fieldset>
</body>
</htm>
Thanks!
P.S. I can give more details if I am not clear enough!
P.P.S. What I mean by
like a table
is like the structure. Not like an actual table with <table>
Easiest way to solve it: CSS-Grid. Will allow for full responsiveness and create a table like layout. to leave the buttons at the bottom as they where, I wrapped them inside an extra div.
body {
font-family: "Bradley's Hand", cursive;
}
form {
display: grid;
grid-template-columns: min-content auto;
grid-row-gap: 2em;
white-space: nowrap;
}
.last-row {
grid-column: span 2;
}
.last-row input {
width: 200px;
}
<body>
<h1>Add Transactions</h1>
<fieldset>
<legend>Use This Form To Add Transactions</legend>
<form action="add.php" method="post">
<label class="label" for="date">
Transaction Date:
</label>
<input type="date" name="date" required>
<label class="label" for="amount">
Transaction Amount:
</label>
<input type="number" name="amount" required>
<label class="label" for="merchant">
Merchant:
</label>
<select name="merchant" required>
<option value="" disable selected>
Select One
</option>
<option value="other">
Other
</option>
</select>
<label class="label" for="om">
Other Merchant:
</label>
<input type="text" name="om">
<label for="type" class="label">
Transaction Type:
</label>
<select name="type" required>
<option value="" disable selected>
Select One
</option>
<option value="other">
Other
</option>
</select>
<label for="ot" class="label">
Other Transaction Type:
</label>
<input type="text" name="ot">
<label for="source" class="label">Source: </label>
<select name="source" required>
<option value="" disable selected>
Select One
</option>
<option value="other">
Other
</option>
</select>
<label for="os" class="label">Other Source: </label>
<input type="text" name="os">
<div class="last-row">
<input type="reset">
<input type="submit" value="Save Transaction">
</div>
</form>
</fieldset>
</body>
</htm>
What I want is for some of the input fields to have two place holder in given image below exactly same like picture given below. I have tried a lot but nothing works.
<form class="subscribe-form">
<div class="personal-information">
<select name = "country" id="country">
<span>Country</span>
<option value ="US" >US</option>
<option value = "India">India</option>
<option value = "Malaysia">Malaysia</option>
</select>
<select name ="cardType" id="cardType">
<option value = "Amex">Amex</option>
<option value = "Visa">Visa</option>
<option value = "Master card">Master card</option>
</select>
<input type="text" id="cnum" name="address" placeholder="Card Number"/>
<div class="date-container">
<div class="card-data">
<input type="text" id="expyear" name="expyear" placeholder="Expiry Date">
<input type="text" id="csc" name="csc" placeholder="CSC"/>
</div>
<div class="name-data">
<input type="text" id="fname" name="firstname" placeholder="First Name"/>
<input type="text" id="lname" name="lastname" placeholder="Last Name"/>
</div>
</div>
</div>
<div class="Billing-deatails">
<h3>Billing Address</h3>
<input type="text" id="line1" name="line2" placeholder="Address Line 1"/>
<input type="text" id="line2" name="line2" placeholder="Address Line 2"/>
<input type="text" id="Town/city" name="Town/city" placeholder="Town/city"/>
<div class="numberType">
<select name = "country" id="country2">
<option value ="US" >US</option>
<option value = "India">India</option>
<option value = "Malaysia">Malaysia</option>
</select>
<input type="text" id="number" name="number" placeholder="Postcode"/>
</div>
</div>
<div class="contact-information">
<h5>Contact Information</h5>
<div class="number-info">
<select name = "phoneType" id="phoneType">
<option value ="Mobile" >Mobile</option>
</select>
<input type="text" id="number" name="number" placeholder="+65"/>
</div>
<input type="email" id="email" name="email" placeholder="Email Address"/>
</div>
</div>
<div class="subscribe-btn">
<button type="submit">SUBSCRIBE</button>
</div>
</form>
There are no multiple placeholder things in HTML. You have to use the Label with custom CSS.You can try the below code but I have done it for only one Select box you can use the same for others. You can edit the CSS as per your convenience.
.select-wrap
{
border: 1px solid #777;
border-radius: 4px;
margin-bottom: 10px;
padding: 0 5px 5px;
width:200px;
background-color:#ebebeb;
}
.select-wrap label
{
font-size:10px;
text-transform: uppercase;
color: #777;
padding: 2px 8px 0;
}
select
{
background-color: #ebebeb;
border:0px;
}
<div class="select-wrap">
<label>Country</label>
<select name = "country" id="country" style="width: 100%;">
<span>Country</span>
<option value ="US" >US</option>
<option value = "India">India</option>
<option value = "Malaysia">Malaysia</option>
</select>
</div>
Im making this webpage and I am almost done its just I have a question regarding the background because the second one is the one that its supposed to look like and the first one is mine. I just want to get rid of that white space in between and have like outer padding. Ive tried playing around with padding and it didnt work for some reason heres the link (https://imgur.com/a/FlVN538) also heres my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cycling Tours</title>
<style>
body {
font-family: Verdana, sans-serif;
}
form {
width: 700px;
margin: 0 auto;
}
h1 {
text-align: center;
}
fieldset {
background-color: #4681A4;
min-width: 700px;
max-width: 700px;
border: solid white 2px;
}
legend {
color: white;
text-indent: 2em;
}
label {
font-size: 0.9em;
}
textarea {
display: block;
width: 80%;
height: 100px;
min-width: 50%;
max-width: 90%;
}
.buttonstyle {
text-transform: uppercase;
font-weight: bold;
background-color:#FFFFE6;
}
input[type=text], input[type=email], input[type=phonenumber] {
background-color:#ffffe6;
}
</style>
</head>
<body>
<h1>Fall 2018 Reviews</h1>
<form method="POST" action="https://csunix.mohawkcollege.ca/tooltime/showit.pl">
<!--<input type="hidden" name="formname" value="Donation Form">
<input type="hidden" name="windowname" value="Donation">-->
<fieldset id="aboutyou">
<legend>About you(optional)</legend>
<label for="aboutyou">I usually prefer to trips around this time of year(select all that apply)</label>
<br>
<select name="seasons" id="seasons" size="4" multiple>
<option>Winter</option>
<option>Spring</option>
<option>Summer</option>
<option>Fall</option>
</select>
<br>
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" >
<br>
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<br>
<label for="phonenumber">Phone Number</label>
<input type="phonenumber" name="phonenumber" id="phonenumber" placeholder="123-456-7890" size="12">
<br>
<label for="email">Email Address</label>
<input type="email" name="email" id="email" placeholder="name#example.com" size="40">
</fieldset>
<fieldset>
<legend>Trip Reviews</legend>
<div id="trails">
<label for="trailchoice"></label>
<select name="trailchoice" id="trailchoice">
<option value="Alberta Rural">Alberta Rural</option>
<option value="B.C. Coast">B.C. Coast</option>
<option value="Ontario Lake Superior">Ontario Lake Superior</option>
<option value="PEI">PEI</option>
<option value="Nova Scotia Cabot Trail">Nova Scotia Cabot Trail</option>
</select>
<div id="daylength">
<label for="days"></label>
<select name="days" id="days">
<option value="5 days">5 days</option>
<option value="7 days">7 days</option>
<option value="10 days">10 days</option>
<option value="14 days">14 days</option>
</select>
<div id="credit">
<input type="radio" id="fourstars" value="4" checked>
<label for="fourstars"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"></label>
<br>
<input type="radio" name="threestars" id="threestars" value="3">
<label for="threestarts"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"></label>
<br>
<input type="radio" name="twostars" id="twostars" value="2">
<label for="twostars"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"></label>
<br>
<input type="radio" name="onestar" id="onestar" value="1">
<label for="onestar"><img src="l5mg/wheel_sm.jpg"></label>
<br>
<label for="feedback">comments</label>
<textarea name="feedback" id="feedback" rows="6" cols="45" placeholder="Place feedback here..."></textarea>
</div>
</select>
</div>
</fieldset>
<fieldset id="fsfeedback">
<legend>I would be interested in these trips:(check all that apply)</legend>
<input type="checkbox" name="Sea or Lake Coast" id="SLC" value="Sea or Lake coast">
<label for="SLC">Sea or lake coast</label>
<br>
<input type="checkbox" name="Rural" id="Rural" value="Rural">
<label for="Rural">Rural</label>
<br>
<input type="checkbox" name="Mountain" id="Mountain" value="Mountains">
<label for="Mountain">Mountains</label>
<br>
<input type="checkbox" name="other" id="other" value="other">
<label for="other" >Other (Please Specify)</label><label for="other"></label>
<input type="text" name="specified" id="specified">
</fieldset>
<input type="submit" value="Send Review" class="buttonstyle">
<input type="reset" value="Cancel" class="buttonstyle">
</form>
</body>
</html>
body {
font-family: Verdana, sans-serif;
}
form {
background: #4681A4;
width: 700px;
margin: 0 auto;
padding-top: 10px;
padding-bottom: 10px;
}
h1 {
text-align: center;
}
fieldset {
border: solid white 2px;
margin: 5px;
margin-bottom: 20px;
}
legend {
color: white;
text-indent: 2em;
}
label {
font-size: 0.9em;
}
textarea {
display: block;
width: 80%;
height: 100px;
min-width: 50%;
max-width: 90%;
}
.buttonstyle {
text-transform: uppercase;
font-weight: bold;
background-color: #FFFFE6;
}
input[type=text],
input[type=email],
input[type=phonenumber] {
background-color: #ffffe6;
}
.buttons {
margin-left: 19px;
}
<h1>Fall 2018 Reviews</h1>
<form method="POST" action="https://csunix.mohawkcollege.ca/tooltime/showit.pl">
<!--<input type="hidden" name="formname" value="Donation Form">
<input type="hidden" name="windowname" value="Donation">-->
<fieldset id="aboutyou">
<legend>About you(optional)</legend>
<label for="aboutyou">I usually prefer to trips around this time of year(select all that apply)</label>
<br>
<select name="seasons" id="seasons" size="4" multiple>
<option>Winter</option>
<option>Spring</option>
<option>Summer</option>
<option>Fall</option>
</select>
<br>
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname">
<br>
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<br>
<label for="phonenumber">Phone Number</label>
<input type="phonenumber" name="phonenumber" id="phonenumber" placeholder="123-456-7890" size="12">
<br>
<label for="email">Email Address</label>
<input type="email" name="email" id="email" placeholder="name#example.com" size="40">
</fieldset>
<fieldset>
<legend>Trip Reviews</legend>
<div id="trails">
<label for="trailchoice"></label>
<select name="trailchoice" id="trailchoice">
<option value="Alberta Rural">Alberta Rural</option>
<option value="B.C. Coast">B.C. Coast</option>
<option value="Ontario Lake Superior">Ontario Lake Superior</option>
<option value="PEI">PEI</option>
<option value="Nova Scotia Cabot Trail">Nova Scotia Cabot Trail</option>
</select>
<div id="daylength">
<label for="days"></label>
<select name="days" id="days">
<option value="5 days">5 days</option>
<option value="7 days">7 days</option>
<option value="10 days">10 days</option>
<option value="14 days">14 days</option>
</select>
<div id="credit">
<input type="radio" id="fourstars" value="4" checked>
<label for="fourstars"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img
src="l5mg/wheel_sm.jpg"></label>
<br>
<input type="radio" name="threestars" id="threestars" value="3">
<label for="threestarts"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"></label>
<br>
<input type="radio" name="twostars" id="twostars" value="2">
<label for="twostars"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"></label>
<br>
<input type="radio" name="onestar" id="onestar" value="1">
<label for="onestar"><img src="l5mg/wheel_sm.jpg"></label>
<br>
<label for="feedback">comments</label>
<textarea name="feedback" id="feedback" rows="6" cols="45" placeholder="Place feedback here..."></textarea>
</div>
</select>
</div>
</fieldset>
<fieldset id="fsfeedback">
<legend>I would be interested in these trips:(check all that apply)</legend>
<input type="checkbox" name="Sea or Lake Coast" id="SLC" value="Sea or Lake coast">
<label for="SLC">Sea or lake coast</label>
<br>
<input type="checkbox" name="Rural" id="Rural" value="Rural">
<label for="Rural">Rural</label>
<br>
<input type="checkbox" name="Mountain" id="Mountain" value="Mountains">
<label for="Mountain">Mountains</label>
<br>
<input type="checkbox" name="other" id="other" value="other">
<label for="other">Other (Please Specify)</label><label for="other"></label>
<input type="text" name="specified" id="specified">
</fieldset>
<div class="buttons">
<input type="submit" value="Send Review" class="buttonstyle">
<input type="reset" value="Cancel" class="buttonstyle">
</div>
</form>
Folks:
I am trying the HTML exercises to build a dating website as
https://www.coursera.org/learn/html-css-javascript/peer/biy2Z/dating-web-site-assessment
1) the labels "Email", "Mobile", and "Address" in the "Your contact information" are not in the same line as their corresponding input element. What may be the problem in the code that caused this?
2) The same issue for in the "Method to contact you: Email Whatsapp In-app chat", the "In-app chat" is put in the second line.
below is the code:
fieldset {
background:lightyellow;
border:10px solid yellow;
margin-bottom:10px;
width:720px;
}
label {
width:180px;
display:inline-block;
text-align:right;
vertical-align:top;
}
.widthclass{ width:auto; }
.rangeLow, .rangeHigh{
text-align:center;
width:40px;
display:inline-block;
vertical-align:top;
color:white;
}
.rangeLow{ background-color:red;}
.rangeHigh{background-color:blue;}
.textareaFormat{width:360px; height:50px;}
label:hover{font-size:20px}
input: hover{font-size:20px}
<FORM action="http://ihome.ust.hk/~rossiter/cgi-
bin/show_everything.php " method="post"
enctype="multipart/form-data" >
<h1>
Please Enter Your Details For Our Dating Websites!
</h1>
<fieldset>
<legend> Your face </legend>
<label for="yourimage"> Your image </label>
<input type="file" id="yourimage" name="avatar"
required>
<br>
<label for="imagePreview" > Image preview:</label><img
src="" id="preview">
</fieldset>
<fieldset>
<legend> Your General Details </legend>
<label for="tname"> Name: </label>
<input type="text" id="tname" name="tname"
placeholder="Your Full Name" required>
<br>
<label for="gender" > Gender: </label>
<input type="radio" name="malegender" id="male" required
>
<label for="male" class=widthclass> Male </label>
<input type="radio" name="femalegender" id="female"
required>
<label for="female" class=widthclass > Female </label>
<br>
<label for="age" >Age: </label>
<input type="number" id="age" name="age" required>
<br>
<label for="birthday"> Date of birth: </label> <input
type="date" name="birthday" id="birthday" required>
<br>
<label for="favoriteColor"> Favorite color: </label>
<input type="color" name="color" id="color">
<br>
<label for="whichCountry"> Which country: </label>
<select name="country">
<option></option>
<option value="noSelection"> no selection </option>
<option value="u.s." > United States </option>
<option value="france"> France </option>
<option value="germany"> Germany </option>
<option value="england"> England </option>
<option value="china"> China </option>
<option value="japan"> Japan </option>
</select>
</fieldset>
<fieldset>
<lengend>Your indicators</lengend>
<br>
<label for="height" > Height:</label>
<div class="rangeLow"> Short </div>
<input type="range" min="0" max="100" step="5"
name="height id=height" >
<div class="rangeHigh"> Tall </div>
<br>
<label for="salary" > Salary:</label>
<div class="rangeLow"> Poor </div>
<input type="range" min="0" max="100" step="5"
name="height" id=salary" >
<div class="rangeHigh"> Rich </div>
</fieldset>
<fieldset>
<lengend>Your contact information</lengend>
<br>
<label for="email" > Email: <label> <input type="email"
id="email" name="email" required>
<br>
<label for="mobile"> Mobile: </label>
<input type="tel" id="mobile" name="mobile" >
<br>
<label for="address" > Address </label>
<textarea rows="3" cols="60" id="address"
name="address"class="textareaFormat">
</textarea>
<br>
<label for="contact_method"> Method to contact you:
</label>
<input type="checkbox" name="contactmethod"
value="email" id="checkboxemail">
<label for="checkboxemail" class="widthclass"> Email
</label>
<input type="checkbox" name="contactmethod"
value="Whatsapp" >
<label for="checkboxwhatsapp" class="widthclass" >
Whatsapp </label>
<input type="checkbox" name="contactmethod"
value="inappchat" >
<label for="checkboxinappchat" class="widthclass" >
In-app chat </label>
</fieldset>
<input type="submit" value=Submit" >
</FORM>
<script
src="https://www.cse.ust.hk/~rossiter/dating_web_site.js
"></script>
You did not close label tag for email by mistake so it is open to the end of document as an inline block:
Wrong:
<label for="email" > Email: <label>
correct:
<label for="email" > Email: </label>
Your code is full of errors.
For example you have this multiple label openings...
<label for="email" > Email: <label> <input type="email"
id="email" name="email" required>
<br>
<label for="mobile"> Mobile: </label>
...and you don't close it anywhere.
Also you have something like this:
<input type="range" min="0" max="100" step="5"
name="height id=height" > <!-- it should be name="height" id="height" -->
Here is fixed code https://jsfiddle.net/3cxgb00g/
Try to use markup validators and advanced text editors which will show errors in your code.