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>
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>
And I used margin-right:-9rem; in input element. But it didn't sound its good approach to me, idk why. But is there a better option how do do it? I was just trying my radio button and checkboxes near the boxes.
I have been trying to do survey form to practice my html and css knowledge. Please help me.
body {
background-color: rgb(25, 230, 161);
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
h1 {
font-weight: bold;
color: white;
margin-top: 2rem;
}
#description, #welcome {
font-style: italic;
font-size: 1.1rem;
}
main {
width: 60%;
border: 2px solid red;
margin: 0 auto;
text-align: left;
padding: 1rem 2rem; /*margin moves the border, padding changes the inside elements, not position of border.*/
}
label {
display: block; /*make labels one under the other */
padding-bottom: .3rem;
padding-top: 1rem;
}
input {
width:20rem;
margin-right: -9rem;
}
[for="dropdown"] {
margin-top: 1rem;
}
p {
margin-bottom: 0;
}
<body>
<h1 id="title">LearningHtmlCss Course Survey Form</h1>
<p id="description">This survey page is built for gathering information about people taking this course. So that we can improve our site.</p>
<p id="welcome">Thank you for taking time to help us improve the platform</p>
<main>
<form id="survey-form">
<label for="name" id="name-label">Name</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
<label for="email" id="email-label">Email</label>
<input type="email" id="email" name="email" placeholder="username#gmail.com" pattern=".+#gmail.com" title="Please provide only gmail address" placeholder="Enter your email" required> <!--email validation-->
<label for="age" id="number-label">Age</label>
<input type="number" id="age" min="7" max="99" placeholder="between 7, and 99" required>
<label for="dropdown">Which option best describes your current role?</label>
<select name="current role" id="dropdown">
<option>Select current role</option>
<option value="student">Student</option>
<option value="job">Full time job</option>
<option value="learner">Full time learner</option>
<option value="not to say">Prefer not to say</option>
<option value="other">Other</option>
</select>
<p>Would you recommend LearningHtmlCss course to a friend?</p>
<label>
<input type="radio" name="option" value="Definitely" checked>Definitely
</label>
<label>
<input type="radio" name="option" value="Maybe">Maybe
</label>
<label>
<input type="radio" name="option" value="Not sure">Not sure
</label>
<p>What would you like to see improved?</p>
<label>
<input type="checkbox" name="front-end" value="front-end">Front-end projects
</label>
<label>
<input type="checkbox" name="back-end" value="back-end">Back-end projects
</label>
<label>
<input type="checkbox" name="forum" value="forum">Forum
</label>
<label>
<input type="checkbox" name="videos" value="videos">Videos
</label>
<label>
<input type="checkbox" name="city-meetups" value="city-meetups">City Meetups
</label>
<label>
<input type="checkbox" name="additional" value="additional">Additional courses
</label>
<label for="comments">Any comments or suggestions?</label>
<input type="textarea" name="comment" id="comments" placeholder="Enter your comment here...">
<button type="submit">Submit</button>
</form>
</main>
</body>
In order to correct the position of the radio and the checkbox of the buttons, you need to replace the css rules of this input:
input {
width: 20rem;
margin-right: -9rem;
}
Replace with this one:
input {
width: auto;
margin: 0 5px 0 0;
}
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>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
Code of the form where reset button is not working. This a form that gathers information of a student.
It uses Labels, text-fields, text-area, radio-buttons, Check-Box, Submit Button, Reset Button etc.
The reset button is not functioning in this code.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
label.la {
text-indent: 30px;
color: red;
width: 240px;
display: inline-block;
}
</style>
<style type="text/css">
input.tf {
border-color: green;
border: 2px solid
}
</style>
<style type="text/css">
#b1:hover {
background-color: red;
color: white
}
#b2:hover {
background-color: green;
color: white
}
</style>
</head>
<body style="text-align: center">
<h1>Assignment 3</h1>
<from style="display:inline-block;" action="/action_page.php">
<fieldset>
<legend>
<h3>Student Info</h3>
</legend>
<label class="la">First Name:</label>
<input class="tf" type="text" placeholder="Jadon" required>
<br><br>
<label class="la">Last Name:</label>
<input class="tf" type="text" placeholder="Sancho" required>
<br><br>
<label class="la">Date of Birth:</label>
<input class="tf" type="text" placeholder="1/1/1999" required>
<br><br>
<label class="la">Age:</label>
<input class="tf" type="text" placeholder="20" required>
<br><br>
<label class="la" style="padding-right: 30px">Gender:</label>
<input type="radio" name="Male" value="Male">
<label>Male</label>
<input type="radio" name="Female" value="Female">
<label for="Female">Female</label>
<br><br>
<label style="color:red;display:inline;padding-left: 60px;width: 210px;display: inline-block;margin:-top:20px">Address:</label>
<textarea cols="25" rows="3" placeholder="type here..." style="border-color: green;border:2px solid;margin-top: : 50px"></textarea>
<br><br>
<label class="la" style="padding-left: 55px">Class:</label>
<input type="radio" name="Class" value="F.Y">
<label>F.Y</label>
<input type="radio" name="Class" value="S.Y">
<label>S.Y</label>
<input type="radio" name="Class" value="T.Y">
<label>T.Y</label>
<input type="radio" name="Class" value="B.Tech">
<label>B.Tech</label>
<br><br>
<label class="la" style="padding-left: 95px">Area(s) of Interest:</label>
<input type="checkbox" name="M.L">
<label for="M.L">M.L</label>
<input type="checkbox" name="A.I">
<label for="A.I">A.I</label>
<input type="checkbox" name="H.P.C">
<label for="H.P.C">H.P.C</label>
<input type="checkbox" name="Cyber-Security">
<label for="Cyber-Security">Cyber-Security</label>
<br><br>
<label class="la">E-mail:</label>
<input class="tf" type="text" placeholder="JSancho07#gmail.com" required>
<br><br>
<label class="la">Password:</label>
<input class="tf" type="Password" placeholder="min 8 characters" required>
<br><br>
<input id="b1" type="reset" name="Reset" value="Reset" style="border-color: red;font-size: 20px;border-radius: 15%;margin:10px">
<input id="b2" type="submit" name="submit" style="border-color: green;font-size: 20px;border-radius: 15%;margin: 10px" onclick="myFunction()">
<script>
function myFunction() {
alert("Submission Successful");
}
</script>
</fieldset>
</from>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
label.la {
text-indent: 30px;
color: red;
width: 240px;
display: inline-block;
}
</style>
<style type="text/css">
input.tf {
border-color: green;
border: 2px solid
}
</style>
<style type="text/css">
#b1:hover {
background-color: red;
color: white
}
#b2:hover {
background-color: green;
color: white
}
</style>
</head>
<body style="text-align: center">
<h1>Assignment 3</h1>
<form style="display:inline-block;" action="/action_page.php">
<fieldset>
<legend>
<h3>Student Info</h3>
</legend>
<label class="la">First Name:</label>
<input class="tf" type="text" placeholder="Jadon" required>
<br><br>
<label class="la">Last Name:</label>
<input class="tf" type="text" placeholder="Sancho" required>
<br><br>
<label class="la">Date of Birth:</label>
<input class="tf" type="text" placeholder="1/1/1999" required>
<br><br>
<label class="la">Age:</label>
<input class="tf" type="text" placeholder="20" required>
<br><br>
<label class="la" style="padding-right: 30px">Gender:</label>
<input type="radio" name="Male" value="Male">
<label>Male</label>
<input type="radio" name="Female" value="Female">
<label for="Female">Female</label>
<br><br>
<label style="color:red;display:inline;padding-left: 60px;width: 210px;display: inline-block;margin:-top:20px">Address:</label>
<textarea cols="25" rows="3" placeholder="type here..." style="border-color: green;border:2px solid;margin-top: : 50px"></textarea>
<br><br>
<label class="la" style="padding-left: 55px">Class:</label>
<input type="radio" name="Class" value="F.Y">
<label>F.Y</label>
<input type="radio" name="Class" value="S.Y">
<label>S.Y</label>
<input type="radio" name="Class" value="T.Y">
<label>T.Y</label>
<input type="radio" name="Class" value="B.Tech">
<label>B.Tech</label>
<br><br>
<label class="la" style="padding-left: 95px">Area(s) of Interest:</label>
<input type="checkbox" name="M.L">
<label for="M.L">M.L</label>
<input type="checkbox" name="A.I">
<label for="A.I">A.I</label>
<input type="checkbox" name="H.P.C">
<label for="H.P.C">H.P.C</label>
<input type="checkbox" name="Cyber-Security">
<label for="Cyber-Security">Cyber-Security</label>
<br><br>
<label class="la">E-mail:</label>
<input class="tf" type="text" placeholder="JSancho07#gmail.com" required>
<br><br>
<label class="la">Password:</label>
<input class="tf" type="Password" placeholder="min 8 characters" required>
<br><br>
<input id="b1" type="reset" name="Reset" value="Reset" style="border-color: red;font-size: 20px;border-radius: 15%;margin:10px">
<input id="b2" type="submit" name="submit" style="border-color: green;font-size: 20px;border-radius: 15%;margin: 10px" onclick="myFunction()">
<script>
function myFunction() {
alert("Submission Successful");
}
</script>
</fieldset>
</form>
</body>
</html>
I'd like to display both label and input in the same line using CSS for the following form. I tried using display, float and clear but not able to get the "look" I was coding for.
The form should look like this form
<header>
<title> Registration form </title>
<link rel="stylesheet" type="text/css" href="style.css">
</header>
<h2>Register here please ! </h2>
<form id="simpleform">
<fieldset>
<label for="name">Full Name </label>
<input type="text" name="name" id="name">
<label for="age">Age in Years </label>
<input type="number" name="age" id="age">
<label for="email">Email ID</label>
<input type="email" name="email" id="email">
<label for="email">Email ID</label>
<input type="email" name="email" id="email">
<label for="gender">Gender</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="Female">Female<br>
<label for="hobbies">Hobbies</label>
<input type="checkbox" name="hobbies" value="Reading"> Reading Books
<input type="checkbox" name="hobbies" value="movies"> Watching Movies
<input type="checkbox" name="hobbies" value="Singing"> Singing
<label for="country">Country</label>
<select name="country">
<option value="us">United States</option>
<option value="India">India</option>
</select>
<br>
<lable for="comments">Comments</lable>
<textarea name="comments" id="comments" rows=5 cols="50"></textarea>
<input type="submit">
<input type="reset" value="Start Again">
</fieldset>
</form>
I re-worked on my html and css and got this desired result
*{
margin: 0;
padding: 0;
}
body{
font-family:verdana sans-serif;
background-color: #99ffcc;
}
h2{
margin-top: 100px;
text-align: center;
color: blue;
}
#simpleform{
width: 500px;
margin: auto;
height: 400px;
border: 1px solid red;
background-color: #ccc;
}
label{
text-align: right;
clear: left;
float: left;
padding-right:13px;
margin-top: 12px;
width: 150px;
}
input,textarea {
margin-top: 12px;
width: auto;
}
input[type="email"]{
margin-top:16px;}
input[type="radio"]{
margin-top: 16px;
}
input[type="checkbox"]{
margin-top: 16px;
}
input[type="number"]{
margin-top:16px;
}
select{
margin-top: 13px;
}
#buttons{
margin-left:160px;
}
input[type="submit"]{
margin-right:80px;
background-color: white;
padding: 10px;
border-radius:10px;
border: 1px solid black;
}
input[type="reset"]{
margin-right:80px;
background-color: white;
padding: 10px;
border-radius:10px;
border: 1px solid black;}
input[type="submit"]:hover
{
background-color: aquamarine;
}
input[type="reset"]:hover
{
background-color: aquamarine;
}
input[type="text"],input[type="number"],input[type="email"]{
width:200px;
border: 1px solid black;
}
<html>
<header><title> Registration form </title>
<link rel="stylesheet" type="text/css" href="style.css">
</header>
<body>
<h2>Register here please ! </h2>
<form id="simpleform">
<div>
<label for="name">Full Name </label>
<input type="text" name="name" id="name">
</div>
<div>
<label for="age">Age in Years </label>
<input type="number" name="age" id="age">
</div>
<div>
<label for="email">Email ID</label>
<input type="email" name="email" id="email">
</div>
<div>
<label for="gender">Gender</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="Female">Female<br>
</div>
<div>
<label for="hobbies">Hobbies</label>
<input type="checkbox" name="hobbies" value="Reading"> Reading Books
<input type="checkbox" name="hobbies" value="movies"> Watching Movies
<input type="checkbox" name="hobbies" value="Singing"> Singing
</div>
<div>
<label for="country">Country</label>
<select name="country">
<option value="us">United States</option>
<option value="India">India</option>
</select><br>
</div>
<div>
<label for="comments" id="lable-comment">Comments</label>
<textarea name="comments" id="comments" rows=5 cols="50"></textarea>
</div>
<div id="buttons">
<input type="submit">
<input type="reset" value="Start Again"></div>
</form>
</body>
</html>
There are a lot of ways to get a 2-column layout but using a table is probably the most simple and straight-forward, example:
<form id="simpleform">
<fieldset>
<table>
<tr>
<td><label for="name">Full Name</label></td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td><label for="age">Age in Years</label></td>
<td><input type="number" name="age" id="age"></td>
</tr>
<tr>
<td><label for="email">Email ID</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="gender">Gender</label></td>
<td>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="Female">Female
</td>
</tr>
<tr>
<td><label for="hobbies">Hobbies</label></td>
<td>
<input type="checkbox" name="hobbies" value="Reading"> Reading Books
<input type="checkbox" name="hobbies" value="movies"> Watching Movies
<input type="checkbox" name="hobbies" value="Singing"> Singing
</td>
</tr>
<tr>
<td><label for="country">Country</label></td>
<td>
<select name="country">
<option value="us">United States</option>
<option value="India">India</option>
</select>
</td>
</tr>
<tr>
<td><lable for="comments">Comments</lable></td>
<td>
<textarea name="comments" id="comments" rows=5 cols="50"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit">
<input type="reset" value="Start Again">
</td>
</tr>
</table>
</fieldset>
</form>