I had a quick HTML/CSS question I hope someone could help me with!
I am trying to learn the specifics of CSS in an online course. I am trying to do a very specific alignment with CSS within a form within a fieldset within a table. I need to have a fieldset split down the middle, and have the label directly on the left, and the input of the form directly on the right. I uploaded 2 pictures: what I have so far and what I am hoping to get, to give a visualization of what I am trying to achieve.
For anyone versed in CSS I am sure this is very easy but it's confusing me. Was just hoping to get some direction!
What I have:
http://imgur.com/gKoWux7
What I want to get:
http://imgur.com/IfeK8D1
Ignore the repetitive code/names in the first image, I am just worried about the alignment of the labels, inputs and buttons.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test 2</title>
<link rel="stylesheet" type="text/css" href="test2.css">
</head>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
<table>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Registration Information</legend>
<table>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Submit Your Registration</legend>
<table>
<tr>
<td><input type="submit"></td>
<td><input type="reset"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Here is my CSS:
body {
background-color: #A8F89C;
margin: auto;
width: 50%;
}
table {
width: 400px;
table-layout: fixed;
}
fieldset {
width: 410px;
margin: auto;
width: 50%;
}
legend {
font-size: 16px;
font-weight: bold;
}
label {
font-size: 14px;
color: #06127D;
}
td label {
font-weight: bold;
padding-right: 7px;
}
td input {
padding-left: 7px;
}
form input {
width: 140px;
}
label input[type="radio"] {
font-size: 14px;
color: #201E1C;
}
button {
width: 75px;
font-weight: bold;
background-color: rgb(28,67,14);
}
Thank you so much for any help!!!
I just have read your requirement what you want to get.
You can use below mentioned css to get layout like this image
http://imgur.com/IfeK8D1
<style>
fieldset,table{
width:100%
}
td{
width:50%;
}
tbody tr td:first-child{
text-align:right;
padding-right:20px;
}
I hope it will usefull for you as per your need.
Thanks
My idea would add this CSS to (Because label doesn't fill the entire width of the td as label is not a block level element)
td label{
width:100%;
display: inline-block;
text-align:right;
}
or if you prefer you could something like this too, add
td {
text-align: right
}
but it moves all the td elements to right.
Snippet below
Take out the border if needed
body {
background-color: #A8F89C;
margin: auto;
}
table {
table-layout: fixed;
}
fieldset {
width: 410px;
margin: auto;
text-align: center;
}
legend {
font-size: 16px;
font-weight: bold;
}
label {
font-size: 14px;
color: #06127D;
}
td label {
font-weight: bold;
padding-right: 7px;
}
td input {
padding-left: 7px;
}
form input {
width: 140px;
}
label input[type="radio"] {
font-size: 14px;
color: #201E1C;
}
button {
width: 75px;
font-weight: bold;
background-color: rgb(28, 67, 14);
}
table {
border: solid red;
display: inline-table;
}
fieldset {
border: solid blue;
}
td:nth-child(1) {
text-align: right
}
<!DOCTYPE html>
<html>
<head>
<title>Test 2</title>
<link rel="stylesheet" type="text/css" href="test2.css">
</head>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
<table>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Registration Information</legend>
<table>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Submit Your Registration</legend>
<table>
<tr>
<td>
<input type="submit">
</td>
<td>
<input type="reset">
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
First of all using div maybe easier to use ..I have modify a bit of your html where i get rid of the tr and td and use div .Hope this help
<div align = "center">
<label>First Name:</label>
<input type="text">
</div>
Related
What command do i need to use to don't make it zoom when i click "submit" or "reset" button. I want them just to look normal. i am supposed to use hover for this program but not for the last 2 buttons
Please see code below of what i have so far. anything is appreciated
<!DOCTYPE html>
<html>
<head>
<title>CSS rules</title>
<style>
input:focus{
background-color: yellow;
height: 40px;
width: 280px;
color: blue;
font-size: 24px;
}
input:hover{
background-color: cyan;
height: 40px;
width: 280px;
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<form action="">
<table>
<tr>
<td>Last Name:</td>
<td>
<input type="text" id="LastName" />
</td>
</tr>
<tr>
<td>First Name:</td>
<td>
<input type="text" id="FirstName"/>
</td>
</tr>
<tr>
<td>E-mail Address :</td>
<td>
<input type="password" id="Email"/>
</td>
</tr>
<tr>
<td>
<input type="submit"/>
</td>
<td>
<input type="reset"/>
</td>
</tr>
</table>
</form>
</body>
<!--body tag ends here-->
</html>
<!--html tag ends here-->
Tried playing with the code but i can't figure it out
<!DOCTYPE html>
<html>
<head>
<title>CSS rules</title>
<style>
input[type="text"]:hover, input[type="password"]:hover {
background-color: yellow;
height: 40px;
width: 280px;
color: blue;
font-size: 24px;
}
input[type="text"]:focus, input[type="password"]:focus {
background-color: cyan;
height: 40px;
width: 280px;
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<form action="">
<table>
<tr>
<td>Last Name:</td>
<td>
<input type="text" id="LastName" />
</td>
</tr>
<tr>
<td>First Name:</td>
<td>
<input type="text" id="FirstName"/>
</td>
</tr>
<tr>
<td>E-mail Address :</td>
<td>
<input type="password" id="Email"/>
</td>
</tr>
<tr>
<td>
<input type="submit"/>
</td>
<td>
<input type="reset"/>
</td>
</tr>
</table>
</form>
</body>
<!--body tag ends here-->
</html>
<!--html tag ends here-->
Changed the way you call the style. By passing in the [type=text] in CSS, you make sure that only type=text and type=password pick up the styles, and making the submit and the reset button not pick up the styles.
You'll need to add default style for when it's not hovering or in focus. Try adding this to your the area between your style tags:
input {
background-color: black;
height: 40px;
width: 280px;
color: white;
font-size: 24px;
}
If that's not what you intended, Yash Digant Joshi may have a better answer.
Add hover effect on input which is not submit or reset.
:where(input:not([type="submit"]):not([type="reset"])):hover
my form I'm working on the Free Code Camp Product Landing page Project. I'm close to finishing, and one of the last things I want to add is a 2 column form. I've lined up the label elements, but it looks really ugly as the input elements are not lined up and I can't think of a way to position them in the way that I want.
``HTML
<!-- Order Section -->
<div id="order-wrapper">
<section id="order-section">
<h2>Order</h2>
<form id="order-form">
<label class="order-box">Product Name
<input>
</label>
<label class="order-box">Quantity
<input>
</label>
<label class="order-box">First Name
<input>
</label>
<label class="order-box">Last Name
<input>
</label>
<label class="order-box">E-mail
<input>
</label class="order-box">
<label>Phone Number
<input>
</label>
<label class="order-box">Street Address
<input>
</label>
</form>
</section>
</div>
<!-- End Order Section -->
/* Order Section */
#order-wrapper{
background-color: rgba(245, 202, 195, 1);
height: 40rem;
}
#order-form{
width: 100%;
}
#order-form label{
display: inline-block;
width: 25%;
margin-left: 20%;
margin-top: 4%;
}
#order-form input{
width: 60%;
margin-left: 5%;
}
#order-section h2{
font-family:'Homemade Apple', cursive;
font-size:2rem ;
font-weight: 500;
text-align: center;
padding-top: 2%;
margin-top: 0.8%;
}
/* End Order Section */
Not sure if this is the style you were going for, you can use tables.
HTML
<div id="order-wrapper">
<section id="order-section">
<h2>Order</h2>
<form id="order-form">
<table style="list-style: none;">
<tr>
<td><label class="order-box">Product Name</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Quantity</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">FIrst Name</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Last Name</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Email</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Phone Number</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Street Address</label></td>
<td><input></td>
</tr>
</table>
</form>
</section>
</div>
I just moved everything into a table, so by default it should line everything up. You may need to tweak the css style further. If you want
something closer to what you had before you can also try splitting things
up into two tables, so that you can have two columns beside each other instead of one column for everything.
Here is an example with two tables:
<div id="order-wrapper">
<section id="order-section">
<h2>Order</h2>
<form id="order-form">
<table style="list-style: none;">
<tr>
<td><label class="order-box">Product Name</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Quantity</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">FIrst Name</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Last Name</label></td>
<td><input></td>
</tr>
</table>
<table>
<tr>
<td><label class="order-box">Email</label></td>
<td> <input> </td>
</tr>
<tr>
<td><label class="order-box">Phone Number</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Street Address</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Something Else..</label></td>
<td><input></td>
</tr>
</table>
</form>
</section>
</div>
My CSS:
#order-form{
width: 100%;
}
#order-form label{
display: inline-block;
width: 25%;
margin-left: 20%;
margin-top: 4%;
}
#order-form input{
width: 60%;
margin-left: 5%;
}
#order-section h2{
font-family:'Homemade Apple', cursive;
font-size:2rem ;
font-weight: 500;
text-align: center;
padding-top: 2%;
margin-top: 0.8%;
}
table {
position: relative;
display: inline-block;
}
I have a problem. I created the following form:
.input-block {
width: 100%;
padding-bottom: 40px;
}
.input-block span {
font-size: 19px;
}
.input-block table {
width: 100%;
border-spacing: 0;
}
.input-block td {
width: 10%
}
.input-block input, select {
width: 50%;
font-size: 16px;
}
.input-block input, select {
padding: 6px 6px;
margin: 8px 0;
display: inline-block;
border: 1px solid #000;
box-sizing: border-box;
}
<div class="input-block">
<h2>Account information</h2>
<table>
<tr>
<td>
<span>Voornaam</span>
</td>
<td>
<input type="text" value="Alexander" />
</td>
</tr>
<tr>
<td>
<span>Tussenvoegsel</span>
</td>
<td>
<input type="text" value="van" />
</td>
</tr>
<tr>
<td>
<span>Achternaam</span>
</td>
<td>
<input type="text" value="Dijk" />
</td>
</tr>
<tr>
<td>
<span>Email</span>
</td>
<td>
<input type="text" value="alexandervdijk#gmail.com" />
</td>
</tr>
</table>
</div>
<div class="input-block">
<h2>Wachtwoord veranderen</h2>
<table>
<tr>
<td>
<span>Nieuw wachtwoord</span>
</td>
<td>
<input type="password" value="" />
</td>
</tr>
<tr>
<td>
<span>Herhaal wachtwoord</span>
</td>
<td>
<input type="password" value="" />
</td>
</tr>
</table>
</div>
<div class="input-block">
<h2>Profiel informatie</h2>
<table>
<tr>
<td>
<span>Geslacht</span>
</td>
<td>
<select id="geslacht" name="geslacht">
<option value="man" selected>Man</option>
<option value="vrouw">Vrouw</option>
</select>
</td>
</tr>
<tr>
<td>
<span>Nationaliteit</span>
</td>
<td>
<select id="nationaliteit" name="nationaliteit">
<option value="nederland" selected>Nederland</option>
<option value="belgie">Belgie</option>
<option value="duitsland">Duitsland</option>
<option value="frankrijk">Frankrijk</option>
</select>
</td>
</tr>
</table>
</div>
Now, this is almost like the way I want, but I can't change 2 things:
I want to decrease the row spacing in the table, so the items are more compact on the screen. The space doesn't need to be gone, but a bit smaller
The input boxes and the names before the input boxes can be closer to each other. I already tried to set a width of 10% on the td in the table, but that didn't work.
Can someone help me change the layout?
I adjusted your code a bit, mostly just the CSS.
Are you looking for something that's more like this?
I put a set width on your input
.input-block input, select {
width: 300px;
font-size: 16px;
}
and decreased width of your input block
.input-block {
width: 70%;
padding-bottom: 40px;
}
.input-block {
width: 70%;
padding-bottom: 40px;
}
.input-block span {
font-size: 19px;
}
.input-block table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.input-block td {
width: 10%;
}
.input-block input, select {
width: 300px;
font-size: 16px;
}
.input-block input, select {
padding: 6px 6px;
margin: 8px 0;
display: inline-block;
border: 1px solid #000;
box-sizing: border-box;
}
<div class="input-block">
<h2>Account information</h2>
<table>
<tr>
<td>
<span>Voornaam</span>
</td>
<td>
<input type="text" value="Alexander" />
</td>
</tr>
<tr>
<td>
<span>Tussenvoegsel</span>
</td>
<td>
<input type="text" value="van" />
</td>
</tr>
<tr>
<td>
<span>Achternaam</span>
</td>
<td>
<input type="text" value="Dijk" />
</td>
</tr>
<tr>
<td>
<span>Email</span>
</td>
<td>
<input type="text" value="alexandervdijk#gmail.com" />
</td>
</tr>
</table>
</div>
</div>
fieldset {
width: 510px;
border-width: 1px;
border-color: black;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 2em;
}
*:not(.menu)(fieldset) {
margin: 1;
padding: 1;
}
<form>
<fieldset>
<legend style="font-weight: bold">
Persoonsgegevens
</legend>
<table>
<tr>
<td class="td1"><label for="Voorletters">Voorletters</label></td>
<td class="td2"><input name="Voorletters" type="" /></td>
</tr>
<tr>
<td class="td1"><label for="Achternaam">Achternaam</label></td>
<td class="td2"><input name="Achternaam" type="" /></td>
</tr>
<tr>
<td class="td1"><label for="Huisnummer">Huisnummer</label></td>
<td class="td2"><input name="Huisnummer" type="number" /></td>
<tr>
<tr>
<td class="td1"><label for="Postcode">Postcode</label></td>
<td class="td2"><input name="Postcode" type="text" pattern="^[1-9]{4}[A-Z]{2}" title="Postcode: 1234AA" placeholder="Format: 1234AA" /></td>
</tr>
</table>
</fieldset>
</form>
I'm learning HTML/CSS and working on a form to learn the syntax.
In the form I have a multiple fields like input type="text" input type="number" and type="text" with pattern.
The width of the number and text with pattern fields is smaller then the width of the regular text fields. I've investigated this and solved this by adding the following CSS code:
*:not(.menu){
Margin: 1;
padding: 0;
}
That worked fine but I'm using a fieldset in which I want to set the padding with the following code:
fieldset {
width: 510px;
border-width: 1px;
border-color: black;
padding-left:1em;
padding-right: 1em;
padding-bottom: 2em;
}
This code does not work unless I change the previous code to:
*:not(.menu)(fieldset)
margin: 1;
padding: 1;
}
but then the text field with pattern and number field aren't the same size as the regular text field anymore.
Anybody any ideas how to fix this?
You can set the width of all input fields in the css like this:
fieldset {
width: 510px;
border-width: 1px;
border-color: black;
padding-left:1em;
padding-right: 1em;
padding-bottom: 2em;
}
*:not(.menu)(fieldset){
margin: 1;
padding: 1;
}
input {
width:200px; /*<------Set the width here as you desire*/
}
<form>
<fieldset>
<legend style="font-weight: bold"><h3>Persoonsgegevens</h3></legend>
<table>
<tr>
<td class="td1"><label for="Voorletters">Voorletters</lable></td>
<td class="td2"><input name="Voorletters" type="" /></td>
</tr>
<tr>
<td class="td1"><label for="Achternaam">Achternaam</lable></td>
<td class="td2"><input name="Achternaam" type="" /></td>
</tr>
<tr>
<td class="td1"><label for="Huisnummer">Huisnummer</lable></td>
<td class="td2"><input name="Huisnummer" type="number" /></td>
<tr>
<tr>
<td class="td1"><label for="Postcode">Postcode</lable></td>
<td class="td2"><input name="Postcode" type="text" pattern="^[1-9]{4}[A-Z]{2}" title="Postcode: 1234AA" placeholder="Format: 1234AA" /></td>
</tr>
</table>
</fieldset>
</form>
Here I made a picture, to show you that they are all the same:
I am new to html/css. i am trying to build up my own form and i am trying to align it in the center. I used the align property in css but its not working.
Html code:
<!DOCTYPE HTML>
<head>
<title>Web Page Having A Form</title>
<link rel = "stylesheet" type="text/css" href="Form.css">
</head>
<body>
<h1>Create a New Account</h1>
<form >
<table>
<tr>
<td>Name :</td> <td><input type="text" name="name"></td><br>
</tr>
<tr>
<td>Email :</td> <td><input type="text" name="email"></td><br>
</tr>
<tr>
<td>Password :</td> <td><input type="password" name="pwd"></td><br>
</tr>
<tr>
<td>Confirm Password :</td> <td><input type="password" name="cpwd"><br>
</tr>
<tr>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
Css Code:
body
{
background-color : #484848;
}
h1
{
color : #000000;
text-align : center;
font-family: "SIMPSON";
}
form
{
align:"center";
}
How should i change my code to align the entire form in the center?
Like this
demo
css
body {
background-color : #484848;
margin: 0;
padding: 0;
}
h1 {
color : #000000;
text-align : center;
font-family: "SIMPSON";
}
form {
width: 300px;
margin: 0 auto;
}
This is my answer. I'm not a Pro. I hope this answer may help you :3
<div align="center">
<form>
.
.
Your elements
.
.
</form>
</div>
Wrap the <form> element inside a div container and apply css to the div instead which makes things easier.
#aDiv{width: 300px; height: 300px; margin: 0 auto;}
<html>
<head></head>
<body>
<div>
<form>
<div id="aDiv">
<table>
<tr>
<td>Name :</td>
<td>
<input type="text" name="name">
</td>
<br>
</tr>
<tr>
<td>Email :</td>
<td>
<input type="text" name="email">
</td>
<br>
</tr>
<tr>
<td>Password :</td>
<td>
<input type="password" name="pwd">
</td>
<br>
</tr>
<tr>
<td>Confirm Password :</td>
<td>
<input type="password" name="cpwd">
<br>
</tr>
<tr>
<td>
<input type="submit" value="Submit">
</td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>
I would just use table and not the form. Its done by using margin.
table {
margin: 0 auto;
}
also try using something like
table td {
padding-bottom: 5px;
}
instead of <br />
and also your input should end with />
e.g:
<input type="password" name="cpwd" />
Or you can just use the <center></center> tags.
Wrap the element inside a div container as a row like
your form here or something like that.
Set css attribute:
width: 30%; (or anything you want)
margin: auto;
Please take a look on following picture for more detail.