Below code was done in Codepen. Here is link: https://codepen.io/andyzam/pen/mdVvrLB
When I resize the window, the items in the table resize properly. But the radio buttons, checkboxes, and text area inputs stay fixed. How do I get those to move?
Do I need to add something to the #radio, #checkboxes, and #textarea IDs? I tried using # radio label {} and using different display properties but they still remained stationary.
body{
background: lightblue;
font-family: monospace;
margin: 0px;
}
p {
text-align: center;
font-size: 14px;
}
#title {
text-align: center;
}
#description {
margin-left: auto;
margin-right: auto;
width: 500px;
font-size: 20px;
text-align: justify;
padding: 10px;
}
input {
width: 250px;
}
label {
font-size: 14px;
margin-right: 0px;
}
table {
margin-left: auto;
margin-right: 35em;
}
td {
text-align: right;
width: 250px;
padding: 10px;
}
input:invalid {
border: 2px dashed red;
}
input:invalid:required {
background-image: linear-gradient(to right, pink, white);
}
input:valid {
border: 2px solid black;
}
select {
width: 260px;
}
select:invalid:required {
background-image: linear-gradient(to right, pink, white);
}
select:valid {
border: 2px solid black;
}
#radio {
display: block;
margin-left: 53em;
padding: 10px;
}
input[type="radio"] {
width: 20px;
}
#checkboxes {
display: block;
margin-left: 53em;
padding: 10px;
}
input[type="checkbox"] {
width: 20px;
}
#text-field {
display: block;
margin-left: 45em;
padding: 10px;
}
#submit-button {
text-align: center;
padding: 20px;
}
<html>
<body>
<title>TikTok User Survey</title>
<main>
<h1 id="title">TikTok User Survey</h1>
<p id="description">We are gathering information from various TikTok users to gauge their satisfaction with the social media platform.</p>
<p> All fields are required.</p>
<form id="survey-form">
<table>
<tr>
<td><label for="name" id="name-label">Your name:</label></td>
<td><input type="text" id="name" name="name-label" placeholder="Your Name" required></td>
</tr>
<tr>
<td> <label for="email" id="email-label">Enter your email:</label></td>
<td><input type="email" id="email" name="email" placeholder="Email" required></td>
</tr>
<tr>
<td> <label for="number" id="number-label">How many followers:</label></td>
<td><input type="number" id="number" name="number" placeholder="No. of Followers (0-100k)" required min="0" max="100000"></td>
</tr>
<tr>
<td>
<label for="age">How old are you?:</label></td>
<td>
<select id="dropdown" name="age" required>
<option disabled selected value> -- select an option -- </option>
<option value="under13">Under 13</option>
<option value="13-20">13-20</option>
<option value="20-30">20-30</option>
<option value="over30">Over 30</option>
</select>
</td>
</tr>
</table>
<p>My gender:</p>
<div id='radio'>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</div>
<p>Favorite types of videos:</p>
<div id="checkboxes">
<input type="checkbox" id="dancing" name="dancing" value="dancing">
<label for="dancing">Dancing</label><br>
<input type="checkbox" id="cooking" name="cooking" value="cooking">
<label for="cooking">Cooking</label><br>
<input type="checkbox" id="pranks" name="pranks" value="pranks">
<label for="pranks">Pranks</label><br>
</div>
<p>Any additional comments about what you like:</p>
<div id="text-field">
<textarea name="message" rows="10" cols="30">I also like....</textarea>
</div>
<div id="submit-button">
<button type="submit" id="submit">Submit</button>
</div>
</form>
</main>
</body>
</html>
Your problem is that you set a fixed margin-left on your radio buttons.
#radio {
display: block;
margin-left: 53em;
padding: 10px;
}
If you want to center your items perhaps you should do like you do with the description and use auto:
#description {
margin-left: auto;
margin-right: auto;
width: 500px;
font-size: 20px;
text-align: justify;
padding: 10px;
}
However an even better way might be to give a flexbox value to the containing element and then you can center elements from there if that is how you wish to position them.
.container {
display: flex;
justify-content: center;
align-items: center;
}
Flexbox isnt defined by horizontal or vertical centering since you can change the direction of centering. But in a default case justify-content: center; will center horizontally and align-items: center; will center vertically.
Outside of this i would also sugest you style using classes instead of ids. Classes can be repeated in more than one place and that is something you will appreciate when styling something like a checkbox that is likely to exist at several places.
Related
I am currently trying to create a basic form using HTML & CSS. In it there are 4 fields: amount of men, amount of women, amount of kids and amount of beer per adult.
I want the first three inputs to be on one side, and the fourth to have its own space on the right. I have not been able to achieve this effect. The beer field should be centered horizontally to the right, and beneath it, the input box.
Maybe I should be using a table for this but alas, I am very new to CSS and am honestly a bit clueless.
body {
display: flex;
align-items: center;
justify-content: center;
}
#app {
border: 1px dotted black;
padding: 1.5em;
width: 30em;
}
#left-div {
display: inline-block;
padding: 0.5em;
border: 1px dotted black;
}
#left-div input {
width: 2em;
margin: 0.5em;
}
#left-div label {
margin: 0.5em 0em 0.5em 0em;
display: inline-block;
}
/* Chopp */
#div-chopp {
display: inline-flex;
border: 1px dotted black;
padding: 0.5em;
}
#div-chopp label {
display: block;
}
#div-chopp input {
width: 2em;
}
<div id="app">
<form action="POST">
<div id="left-div">
<label for="men">Men</label>
<input type="number" value="0" name="men">
<br>
<label for="women">Women</label>
<input type="number" value="0" name="women">
<br>
<label for="kids">Kids</label>
<input type="number" value="0" name="kids">
</div>
<div id="div-chopp">
<label for="beer">Litros de Beer por Adulto</label>
<input type="number" value="0" name="beer">
</div>
</form>
</div>
Here's a start. You could use more custom classes instead of the descendant selectors. Avoid using IDs, though, so your CSS is reusable.
body {
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
display: flex;
border: 1px dotted black;
padding: 1.5em;
width: 30em;
}
.wrapper>div {
display: flex;
flex-direction: column;
padding: 0.5em;
border: 1px dotted black;
}
.wrapper>div>div {
display: flex;
justify-content: space-between;
}
.wrapper>div:last-child>div {
justify-content: center;
}
.wrapper input {
width: 2em;
margin-left: .5em;
}
<div id="app">
<form action="POST">
<div class="wrapper">
<div>
<div>
<label for="men">Men</label>
<input type="number" value="0" name="men">
</div>
<div>
<label for="women">Women</label>
<input type="number" value="0" name="women">
</div>
<div>
<label for="kids">Kids</label>
<input type="number" value="0" name="kids">
</div>
</div>
<div>
<div>
<label for="beer">Litros de Beer por Adulto</label>
</div>
<div>
<input type="number" value="0" name="beer">
</div>
</div>
</div>
</form>
</div>
I'm working on a hotel reservation webpage, and having trouble aligning the input/select fields. For example, my current code shows the first name and the last name in two different lines, but I want to have them all together. This is my form looks like with my code:
first name
last name
address 1
address 2
city
state
zip
And below is how I wanted it to be:
first name last name <<----
address 1
address 2
city state <<----
zip
From my research I was able to do similarly by using display: inline-block, so I tried using it in my code as below, but it does not change anything. What am I doing wrong here?
#mainContainer {
width: 1139px;
display: flex;
justify-content: center;
padding: 0;
margin: auto;
text-align: center;
}
#formContainer {
max-width: 1000px;
width: 100%;
height: 100%;
margin-top: 110px;
background-color: white;
}
#contact {
padding-top: 25px;
}
#customerInformationForm {
width:50%;
float:left;
margin-bottom: 50px
}
#contact input {
width: 70%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact select {
width: 70%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input [class="customerFullName"] {
display: inline-block;
width: 50%;
}
<div id="mainContainer">
<div id="formContainer">
<form id="contact" action="" method="post">
<div id="customerInformationForm">
<input class="customerFullName" placeholder="First name" type="text">
<input class="customerFullName" placeholder="Last name" type="text">
<input placeholder="Address 1" type="text">
<input placeholder="Address 2" type="text">
<input placeholder="City" type="text">
<select id="state" name="state">
<option value="State" selected>State</option>
<option value="Alabama">AL</option>
<option value="Alaska">AK</option>
<option value="Arizona">AZ</option>
</select>
<input placeholder="ZIP" type="text">
</div>
</form>
</div>
</div>
You made a little mess about all those "width" declarations. You made your div #customerInformationForm "width" for a half of a parent (50% width). Then you inserted in that div your first, last name etc. inputs, and set up their width for 70% of the parent, which actually made no possible, to insert two inputs side by side (70% + 70% equals more than 100%, so it displays in new line). Reconsider using all these width declarations, below you have a little start how you may handle it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#mainContainer {
width: 1139px;
display: flex;
justify-content: center;
padding: 0;
margin: auto;
text-align: center;
}
#formContainer {
max-width: 1000px;
width: 100%;
height: 100%;
margin-top: 110px;
background-color: white;
}
#contact {
padding-top: 25px;
}
#customerInformationForm {
/* width:50%;*/
float:left;
margin-bottom: 50px;
background-color: red;
}
#contact input {
width: 35%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input:nth-child(3),
#contact input:nth-child(4) {
width: 70%;
}
#contact select {
width: 35%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact #customerInformationForm input .customerFullName {
display: inline-block;
width: 70%;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="formContainer">
<form id="contact" action="" method="post">
<div id="customerInformationForm">
<input class="customerFullName" placeholder="First name" type="text">
<input class="customerFullName" placeholder="Last name" type="text">
<input placeholder="Address 1" type="text">
<input placeholder="Address 2" type="text">
<input placeholder="City" type="text">
<select id="state" name="state">
<option value="State" selected>State</option>
<option value="Alabama">AL</option>
<option value="Alaska">AK</option>
<option value="Arizona">AZ</option>
</select>
<input placeholder="ZIP" type="text">
</div>
</form>
</div>
</div>
</body>
</html>
Use semantic tags like fieldset to you advantage here to group elements. I also champion the proper use of label, not hijacking the place holder attribute for that purpose.
The example below could use a bit of style tidying but it will give you the idea.
It uses flexbox to achieve inlining the field where required.
#customerInformationForm {
padding-top:2em;
}
fieldset {
border: none;
position:relative;
}
#customerInformationForm fieldset {
padding-left:0;
}
#customerInformationForm {
background-color:#DDD;
}
#customerInformationForm > fieldset {
background-color:#EEE;
padding: 1.5em 1em;
margin-bottom: 0.5em;
border-radius:5px;
}
input, select {
width:100%;
}
legend {
font-weight: bold;
padding-left: 0;
position:absolute;
top:0;
}
label {
display: block;
}
.flex {
display:flex;
align-items:stretch;
}
.flex > .form_group {
flex:1;
}
.form_group {
margin-right:10px;
}
<div id="mainContainer">
<div id="formContainer">
<form id="contact" action="" method="post">
<fieldset id="customerInformationForm">
<legend>Customer Information</legend>
<fieldset class="customer_name flex">
<legend>Customer Name</legend>
<div class="form_group">
<label for="firstName">First Name</label>
<input class="customerFullName" id="firstName" placeholder="Eg: John" type="text">
</div>
<div class="form_group">
<label for="lastName">Last Name</label>
<input class="customerFullName" placeholder="Eg: Smith" id="lastName" type="text">
</div>
</fieldset>
<fieldset class="address">
<legend>Address</legend>
<div class="form_group">
<label for="address1">Address 1</label>
<input type="text" id="address1">
</div>
<div class="form_group">
<label for="address1">Address 2</label>
<input type="text">
</div>
<fieldset class="city_state flex">
<div class="form_group">
<label for="City">City</label>
<input type="text" id="City">
</div>
<div class="form_group">
<label for="state">State</label>
<select id="state" name="state">
<option value="" selected></option>
<option value="Alabama">AL</option>
<option value="Alaska">AK</option>
<option value="Arizona">AZ</option>
</select>
</div>
</fieldset>
<div class="form_group">
<label for="zip">Zip</label>
<input id="zip" type="text">
</div>
</fieldset>
</fieldset>
</form>
</div>
</div>
I have this form. I would like that until 768px width the form is inline, and afterwords the form should be vertical.
I am a little bit in doubt, if I have to set up a breakpoint, or bootstrap has a function that does that? As it is now, the form keeps being inline.
Does anybody knows how I can do that?
HTML
<div class="sign-up">
<p class="sub-header">#Helpers.GetText(CurrentPage, "signupHeaderText", CurrentPage.Parent)</p>
<form id="signupForm">
<div class="form-group">
<label class="sr-only" for="name">#Helpers.GetText(CurrentPage, "signupNameFieldText", CurrentPage.Parent)</label>
<input type="text" class="form-control" placeholder="#Helpers.GetText(CurrentPage, "signupNameFieldText", CurrentPage.Parent)" id="name" name="name" required />
</div>
<div class="form-group">
<label class="sr-only" for="email">#Helpers.GetText(CurrentPage, "signupEmailFieldText", CurrentPage.Parent)</label>
<input type="email" class="form-control" id="email" name="email" placeholder="#Helpers.GetText(CurrentPage, "signupEmailFieldText", CurrentPage.Parent)" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">#Helpers.GetText(CurrentPage, "signupCtaButtonText", CurrentPage.Parent)</button>
</form>
</div>
SCSS:
.sign-up {
padding: $grid-gutter-width;
margin-bottom: $grid-gutter-width;
border-radius: 5px;
background-color: $white3;
.form-control {
box-shadow: none;
border-color: $white4;
}
.error {
border: 1px red solid;
}
label {
&#name,
&#email {
&-error {
display: none !important;
}
}
}
.btn {
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
border: none;
width: 100%;
}
}
.signup-wide {
padding-top:15px;
form {
display: flex;
justify-content: space-between;
.form-group {
width: 33%;
height: 40px;
max-width: 200px;
input {
height: 100%;
}
}
.btn {
padding-top: 10px;
padding-bottom: 10px;
height: 40px;
width: 33%;
}
}
}
Bootsrap has system class for this, use <form class="form-inline">
I have the following input textboxes, but I have aligned them in css with {width: xxx px;} which is not a good practice as it will not always align correctly.
<style>
#left_col p {
margin-top: 15px;
margin-bottom: 15px;
}
.notvis {
display: none;
margin-top: 5px;
margin-bottom: 5px;
}
#ws_doc_txt {
width: 350px;
}
#ws_end_txt {
width: 358px;
}
#ws_ns_txt {
width: 340px;
}
#ws_op_txt {
width: 25%;
}
#left_col {
float: left;
width: 480px;
padding: 0 0 0 0;
}
#right_col {
margin: 0 0 0 500px;
padding: 0 0 0 0;
text-align: left;
}
#textarea1 {
text-align: left;
}
#button1 {
margin-top: 20px;
margin-bottom: 20px;
}
.greentxt {
color: green;
}
.redtxt {
color: red;
}
</style>
</head>
<body>
<div id="left_col">
<p>
<label>
<input type="radio" name="ws_type" value="WSDL" id="ws_type_0">
WSDL</label>
<label>
<input type="radio" name="ws_type" value="NOWSDL" id="ws_type_1">
Endpoint</label>
</p>
<p id="ws_doc">
<label for="ws_doc">Document:</label>
<input type="text" name="ws_doc" id="ws_doc_txt">
</p>
<p id="ws_end">
<label for="ws_end">Endpoint:</label>
<input type="text" name="ws_end" id="ws_end_txt">
</p>
<p id="ws_ns">
<label for="ws_ns">Namespace:</label>
<input type="text" name="ws_ns" id="ws_ns_txt">
</p>
<p>
<label for="ws_op">Operation:</label>
<input type="text" name="ws_op" id="ws_op_txt">
</p>
<p>
<label for="ws_par">Parameter:</label>
<input type="text" name="ws_par" id="ws_par_txt">
</p>
<p>
<label for="ws_val">Value:</label>
<input type="text" name="ws_val" id="ws_val_txt">
</p>
<input type="submit" name="test" value="Test">
</div>
What would be the correct way to make the width of the textboxes always stop at a certain point on the right side? Also, is using <p> tags to make inputs behave like block elements wrong? Could I just use css to have them stay 1 at each line? Thanks
Consider using a table to have all inputs aligned on the left side. Giving all inputs the same width should then align them perfectly on the right as well.
#left_table input {
width:350px;
}
<table id="left_table">
<tr>
<td><label for="ws_doc">Document:</label></td>
<td><input type="text" name="ws_doc" id="ws_doc_txt">
</tr>
<tr>
<td><label for="ws_end">Endpoint:</label></td>
<td><input type="text" name="ws_end" id="ws_end_txt">
</tr>
<!-- etc... -->
</table>
if you want all your text boxes to have the same attribute with proper positioning you can try this(obviously set proper values):
input[type='text']
{
width: 270px;
height: 30px;
top: 167px;
left: 43px;
position:relative;
margin-left: 10px;
background-color: #F3F3F3;
border: 1px solid #D6D6C2;
border-radius: 3px;
}
I'm looking for the most efficient way to code a fairly simple html form layout I've done a mockup of.
So far I've thought of a number of ways to code this but they all seem rather cumbersome when implemented.
Basically what I'm trying to put into action is plain text aligned to the right and form imputes aligned to the left with a line in the center of both. Below is an image that should give an example of what I'm trying to achieve.
Here's one approach, though I think you could have helped yourself a great deal more, by showing previous attempts and explaining problems you had. However:
form {
width: 80%;
max-width: 40em;
margin: 0 auto;
color: #3f3a27;
background: #f4f0e5 url(http://davidrhysthomas.co.uk/linked/test.png) 35% 0 repeat-y;
padding: 0.5em;
}
label, input[type=text], select {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-box-sizing: border-box;
margin-bottom: 0.6em;
}
label {
width: 30%;
text-align: right;
margin: 0 10% 0 0;
}
label:after {
content: ': ';
}
input[type=text] {
width: 40%;
}
select {
width: 20%;
}
fieldset {
margin: 0 0 1em 0;
}
With the HTML:
<form action="#" method="post">
<fieldset>
<label for="fullName">Full name</label>
<input type="text" id="fullName" />
<label for="companyName">Company</label>
<input type="text" id="companyName" />
</fieldset>
<fieldset>
<label for="select">Select</label>
<select id="select" name="select">
<option>Option one</option>
<option>Option two</option>
</select>
<label for="t1">Text input 1</label>
<input id="t1" type="text" />
<label for="t2">Text input 1</label>
<input id="t2" type="text" />
<label for="t3">Text input 1</label>
<input id="t3" type="text" />
</fieldset>
</form>
JS Fiddle demo.
Here is a basic form with minimal style
HTML
<form>
<div class="line">
<label for="input">Full Name</label>
<div class="input">
<input type="text" size="30" name="input">
</div>
</div>
<div class="line">
<label for="input">Company</label>
<div class="input">
<input type="text" size="30" name="input">
</div>
</div>
<div class="line">
<label for="nselect">Dropdown Menu</label>
<div class="input">
<select name="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="line">
<label for="input">Text 1</label>
<div class="input">
<input type="text" size="30" name="input">
</div>
</div>
<div class="line">
<label for="input">Text 2</label>
<div class="input">
<input type="text" size="30" name="input">
</div>Save
</div>
<div class="line">
<label for="input">Text 3</label>
<div class="input">
<input type="text" size="15" name="input">
</div>
</div>
</form>
CSS
form {
margin:10px 0;
}
label {
color: #404040;
float: left;
font-size: 13px;
line-height: 18px;
padding-top: 6px;
text-align: right;
width: 130px;
}
label, input, select, textarea {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: normal;
line-height: normal;
}
input, textarea, select {
-moz-border-radius: 3px 3px 3px 3px;
border: 1px solid #CCCCCC;
color: #808080;
display: inline-block;
font-size: 13px;
height: 18px;
line-height: 18px;
padding: 4px;
width: 210px;
}
select {
height: 27px;
line-height: 27px;
}
form .input {
margin-left: 150px;
}
form .line {
margin-bottom: 18px;
}
Test
http://jsfiddle.net/andresilich/qxMVd/
I recommend using the display values of table, table-row, and table-cell to keep the markup as semantically neat as possible: See this jsFiddle
CSS & HTML http://jsfiddle.net/27cdz/3/
I have it like you wanted it: http://jsfiddle.net/XURye/
With the same colors and every position is correct too!
This minimal two selectors CSS from this Drupal post worked really well:
.form-item {
padding: 10px 0 10px 200px;
position: relative;
}
.form-item label {
left: 0;
position: absolute;
}