I am trying to make a little website and have two inputs. The problem: One is on the right of the other, but I want to have it beneath. This is a very simple question, though I did not find a good answer.
<form>
<h2>Login</h2>
<input type="text" placeholder="Username" id="username">
<input left="40px" type="text" placeholder="Password" id="password">
<input type="submit" value="Login now">
</form>
You can make them display as block to have them beneath each other just add
input {
display: block;
}
to your css file
input {
display: block;
margin: 5px;
}
<form>
<h2>Login</h2>
<input type="text" placeholder="Username" id="username">
<input left="40px" type="text" placeholder="Password" id="password">
<input type="submit" value="Login now">
</form>
Try to add some css class, playing with flex:
.myForm {
display: flex;
flex-direction: column;
}
<form class="myForm">
<h2>Login</h2>
<input type="text" placeholder="Username" id="username">
<input left="40px" type="text" placeholder="Password" id="password">
<input type="submit" value="Login now">
</form>
Related
I have searched Stack Overflow for all search terms I am familiar with and have been successful creating a single row User Name/Password/Submit solution WITH two-stacked rows in-line showing an opportunity to "Remember Me" (checkbox) and a "Forgot Password?".
The code I used to build this uses a Table structure and I am wondering if this is the best method given all the HTML5 and CSS enhancements (that I may not be familiar with). Is there a better (or more modern) approach to this that would be recommended to ensure strong browser support? Here is the code I've used thus far:
<input type="email" name="email_address" id="email_address" tabindex="1" placeholder="Enter your EMAIL address">
<input type="password" name="password" id="password" tabindex="2" placeholder="Enter your PASSWORD">
<table style="display:inline-table;">
<tr>
<td style="line-height:0.5; padding-top:0;">
<input type="checkbox" id="remember_me" name="remember_me">
<label style="color:#fff; font-size:70%;" for="remember_me"> Remember Me</label>
</td>
</tr>
<tr>
<td style="line-height:0.5">
<label style="color:#fff; font-size:70%;" for="remember_me">Forgot Password?</label>
</td>
</tr>
</table>
<input type="submit" name="submit" id="submit" tabindex="3" value="Login" onClick="Login();">
I think its better to use flexbox box its less confusable
<div style="background-color:#3f0;width:100%;display:flex;gap:8px"><!--flex added and gap-->
<input type="email" name="email_address" id="email_address" tabindex="1" placeholder="Enter your EMAIL address">
<input type="password" name="password" id="password" tabindex="2" placeholder="Enter your PASSWORD">
<div style="display:flex;flex-direction:column"><!--flex added-->
<div style="display:flex;align-items:center"><!--flex added-->
<input type="checkbox" id="remember_me" name="remember_me">
<label style="color:#000; font-size:70%;" for="remember_me"> Remember Me</label>
</div>
<label style="color:#000; font-size:70%;" for="remember_me">Forgot Password?</label>
</div>
<input type="submit" name="submit" id="submit" tabindex="3" value="Login" onClick="Login();">
</div>
I have to admit you did that in a pretty odd way in my opinon. Here's how I would do it using Flexbox instead of a table.
#container {
display: flex;
width: 100%;
background-color: gray;
padding: 5px;
gap: 5px;
margin-top: 20px;
}
input {
flex-grow: 1;
}
#remember-password p {
color:white;
margin: 0;
}
#remember-password div {
display: flex;
align-items: center;
}
button {
padding: 0 20px;
}
<div id="container">
<input type="text" placeholder="email"/>
<input type="text" placeholder="password"/>
<div id="remember-password">
<div>
<input type="checkbox"/>
<p>Remember Me</p>
</div>
<div>
<p>Forgot Password ?</p>
</div>
</div>
<button>Login</button>
</div>
Any idea why the styling is not effective when I use id on the form tag but it becomes effective after replacing id with class
<form id="contact-form">
<label>Subject</label>
<input class="input-field" type="text" name="subject">
<label>Email</label>
<input class="input-field" type="text" name="email">
<label>Message</label>
<input id="submit-button" type="submit" value="Send">
</form>
#contact-form{
display: block
}
It is applying to form and it is displaying as block but it seems you want form child elements to be displayed block so use * with #contact-form
#contact-form * {
display: block
}
<form id="contact-form">
<label>Subject</label>
<input class="input-field" type="text" name="subject">
<label>Email</label>
<input class="input-field" type="text" name="email">
<label>Message</label>
<input id="submit-button" type="submit" value="Send">
</form>
And form tag is a block-level element but input label is not.
You can see by applying other properties to id
#contact-form {
display: block;
background-color: red;
}
<form id="contact-form">
<label>Subject</label>
<input class="input-field" type="text" name="subject">
<label>Email</label>
<input class="input-field" type="text" name="email">
<label>Message</label>
<input id="submit-button" type="submit" value="Send">
</form>
I have a form inside a div. I want to move the div to the right, and I can do that if I use an inline style like this:
<div class="joinform-page" style="margin-left: 30%;>
I want to move it using margin-left: 30% in the css, not as an inline style because inline styles make media queries more difficult. But it ignores any margin changes I make in the css.
Here's the full html:
<div class="joinform-page">
<div class="form">
<form action="data_in.php" method="post" name='data_in' id='data_in'>
<input type="text" placeholder="Email" name="email_field" maxlength="60">
<input type="text" placeholder="First Name (optional)" name="firstname" maxlength="50">
<input type="text" placeholder="Last Name (optional)" name="lastname" maxlength="50">
<div><input type="hidden" id="password" name="password" value="pwdtemp"></div>
<div><input type="hidden" id="comments" name="comments" value="none"></div>
<button class="btn_class" style="color:rgb(255,255,255); background-color:rgb(25,25,25); text-align:center;" id="btn_submit" onclick="GetDate();">Submit Form</button><br><br><br>
<div style="padding-left:0%;">
<label class="container">
<span class="betajoinpage_cbx">Add me to your list</span>
<input type="hidden" name="custom_checkbox" value="No">
<input type="checkbox" id="ckbx" name="custom_checkbox" checked="checked" value="Yes"><span class="checkmark" style="color:blue;"></span>
</label></div><br>
</form>
</div>
</div>
Here's the relevant css class:
.joinform-page {
width: 80%;
padding: 0% 0 0;
margin-top: -2.5%;
margin-left: 30%; }
Why doesn't this div move when I use margin-left in the css,. not as an inline style.
Thanks for any help.
Actually It was working with the same piece of code.
If it still doesn't work, there might be styling for parent element or another styling for same element.
The CSS you have above works as you would expect. Please ensure your CSS is correctly imported like so:
<!-- Where FILE_NAME is the name of your .CSS file -->
<link rel="stylesheet" type="text/css" href="FILE_NAME.css">
.joinform-page {
width: 80%;
padding: 0% 0 0;
/*margin-top: -2.5%;*/
margin-left: 30%;
}
<div class="joinform-page">
<div class="form">
<form action="data_in.php" method="post" name='data_in' id='data_in'>
<input type="text" placeholder="Email" name="email_field" maxlength="60">
<input type="text" placeholder="First Name (optional)" name="firstname" maxlength="50">
<input type="text" placeholder="Last Name (optional)" name="lastname" maxlength="50">
<div><input type="hidden" id="password" name="password" value="pwdtemp"></div>
<div><input type="hidden" id="comments" name="comments" value="none"></div>
<button class="btn_class" style="color:rgb(255,255,255); background-color:rgb(25,25,25); text-align:center;" id="btn_submit" onclick="GetDate();">Submit Form</button><br><br><br>
<div style="padding-left:0%;">
<label class="container">
<span class="betajoinpage_cbx">Add me to your list</span>
<input type="hidden" name="custom_checkbox" value="No">
<input type="checkbox" id="ckbx" name="custom_checkbox" checked="checked" value="Yes"><span class="checkmark" style="color:blue;"></span>
</label></div><br>
</form>
</div>
</div>
I have this HTML form that previously I had the width of the input fields to be 100% but I made some changes and did not know what caused the change.
<form action="/forms.php" method="post">
<div>
<input type="text" id="name" name="fullname" placeholder="Name" width:100%>
</div>
<div>
<textarea id="msg" name="message" placeholder="Description"></textarea>
</div>
<div>
<input type="text" name="emailaddress" placeholder="Email Address">
<input type="text" name="contactno" placeholder="Contact Number">
</div>
<input type="submit" name="send" value="Submit" id="subsubmit" class="btn2"/>
</form>
I have already added the following CSS in my HTML
.input {
width: 100%;
}
.textarea {
width: 100%;
}
.form {
width: 100%;
}
Fiddle link - https://jsfiddle.net/v83g4003/
input textarea form are HTML tags not a class. You have used . in css before HTML tags which indicates it as a class thats why your css is not working.
Just remove . in your css
Stack Snippet
input {
width: 100%;
}
textarea {
width: 100%;
}
form {
width: 100%;
}
<form action="/forms.php" method="post">
<div>
<input type="text" id="name" name="fullname" placeholder="Name" width:100%>
</div>
<div>
<textarea id="msg" name="message" placeholder="Description"></textarea>
</div>
<div>
<input type="text" name="emailaddress" placeholder="Email Address">
<input type="text" name="contactno" placeholder="Contact Number">
</div>
<input type="submit" name="send" value="Submit" id="subsubmit" class="btn2" />
</form>
Have a look at this edited jsfiddle: jsfiddle example
Also using width:100% as a html attribute will not work, in html you will need to do it like 'width="100%"'. Though using a CSS is better since it seperates your design from your logic (as you probably already knew)
I would like to produce the following form style:
Name Email
[.................] [.................]
Subject
[.................]
Message
[.........................................]
[.........................................]
[.........................................]
[.........................................]
The HTML code I have is:
<form name="message" method="post">
<section>
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
<label for="email">Email</label>
<input id="email" type="text" value="" name="email">
</section>
<section>
<label for="subject">Subject</label>
<input id="subject" type="text" value="" name="subject">
<label for="message">Message</label>
<input id="message" type="text" value="" name="message">
</section>
</form>
At the moment it is producing:
Name [...................]
Email [...................]
Subject [...................]
Message
[.........................................]
[.........................................]
[.........................................]
[.........................................]
What would be the best way to do this? I keep getting in a muddle my floats!
I'd make both the input and label elements display: block , and then split the name label & input, and the email label & input into div's and float them next to each other.
input, label {
display:block;
}
<form name="message" method="post">
<section>
<div style="float:left;margin-right:20px;">
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</div>
<div style="float:left;">
<label for="email">Email</label>
<input id="email" type="text" value="" name="email">
</div>
<br style="clear:both;" />
</section>
<section>
<label for="subject">Subject</label>
<input id="subject" type="text" value="" name="subject">
<label for="message">Message</label>
<input id="message" type="text" value="" name="message">
</section>
</form>
Probably a bit late but this worked for me.
i simply used column flex-direction on the label and input elements
HTML
<form id="survey-form">
<label for="name">Name</label>
<input type="text" id="name">
<label>Email</label>
<input type="email" id="email">
</form>
CSS
label,input{
display:flex;
flex-direction:column;
}
You could try something like
<form name="message" method="post">
<section>
<div>
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</div>
<div>
<label for="email">Email</label>
<input id="email" type="text" value="" name="email">
</div>
</section>
<section>
<div>
<label for="subject">Subject</label>
<input id="subject" type="text" value="" name="subject">
</div>
<div class="full">
<label for="message">Message</label>
<input id="message" type="text" value="" name="message">
</div>
</section>
</form>
and then css it like
form { width: 400px; }
form section div { float: left; }
form section div.full { clear: both; }
form section div label { display: block; }
I know this is an old one with an accepted answer, and that answer works great.. IF you are not styling the background and floating the final inputs left. If you are, then the form background will not include the floated input fields.
To avoid this make the divs with the smaller input fields inline-block rather than float left.
This:
<div style="display:inline-block;margin-right:20px;">
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</div>
Rather than:
<div style="float:left;margin-right:20px;">
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</div>
I'd prefer not to use an HTML5 only element such as <section>. Also grouping the input fields might painful if you try to generate the form with code. It's always better to produce similar markup for each one and only change the class names. Therefore I would recommend a solution that looks like this :
CSS
label, input {
display: block;
}
ul.form {
width : 500px;
padding: 0px;
margin : 0px;
list-style-type: none;
}
ul.form li {
width : 500px;
}
ul.form li input {
width : 200px;
}
ul.form li textarea {
width : 450px;
height: 150px;
}
ul.form li.twoColumnPart {
float : left;
width : 250px;
}
HTML
<form name="message" method="post">
<ul class="form">
<li class="twoColumnPart">
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</li>
<li class="twoColumnPart">
<label for="email">Email</label>
<input id="email" type="text" value="" name="email">
</li>
<li>
<label for="subject">Subject</label>
<input id="subject" type="text" value="" name="subject">
</li>
<li>
<label for="message">Message</label>
<textarea id="message" type="text" name="message"></textarea>
</li>
</ul>
</form>
There is no need to add any extra div wrapper as others suggest.
The simplest way is to wrap your input element inside a related label tag and set input style to display:block.
Bonus point earned: now you don't need to set the labels for attribute. Because every label target the nested input.
<form name="message" method="post">
<section>
<label class="left">
Name
<input id="name" type="text" name="name">
</label>
<label class="right">
Email
<input id="email" type="text" name="email">
</label>
</section>
</form>
https://jsfiddle.net/Tomanek1/sguh5k17/15/
Using flex-direction: column; on the label elements will place the labels above their boxes, however it will also lock all the boxes in a long column. To get more than one box per line, with the label above the boxes you must pair them with divs. Here is an example of both:
#survey-form1 label {
display:flex;
flex-direction:column;
}
#survey-form2 {
display: flex;
flex-direction: row;
}
.inputPair {
display: flex;
flex-direction: column;
margin-right: 10px
}
<form id="survey-form1">
<label for="name1">Name</label>
<input type="text" id="name1">
<label for="email1">Email</label>
<input type="email" id="email">
</form>
<form id="survey-form2">
<div class="inputPair">
<label for="name2">Name2</label>
<input type="text" id="name2">
</div>
<div class="inputPair">
<label for="email2">Email2</label>
<input type="email" id="email2">
</div>
</form>
10 minutes ago i had the same problem of place label above input
then i got a small ugly resolution
<form>
<h4><label for="male">Male</label></h4>
<input type="radio" name="sex" id="male" value="male">
</form>
The disadvantage is that there is a big blank space between the label and input, of course you can adjust the css
Demo at:
http://jsfiddle.net/bqkawjs5/
OR....you can use flexbox with flex-direction: column on the imputs and they will arrange like bliss.