Ive been working on trying to get a simple "login" form to be displayed vertically and position it as well. It seems that I can do one or the other, never both. Ive tried different ways of doing this neither worked out, so this is basically what I had last.
HTML
<form class = "login">
E-Mail: <input type="text" name="id" maxlength="30" value="" />
Password: <input type="text" name="pw" maxlength="30" value="" />
<input type="submit" name="submit" value="Login" />
</form>
CSS
login {
position:absolute;
top:10px;
left:185px;
}
login.input {
display: inline;
}
Right now your CSS is targeting a <login> element in the DOM and a <login> element with a class of input. I believe what you are trying to do is target the class of login and element's inside the form with a class of login. Try modifying your CSS like so:
.login {
position:absolute;
top:10px;
left:185px;
}
.login input {
display: inline;
}
JSFiddle
Related
I have a basic HTML page with two input fields, one text and one button. When the textfield has the focus I want the button to be hidden. I have it working fine providing I do not add any more HTML code (which I wish to do) between the two input tags.
I know I could do this with jQuery but ideally I would prefer a CSS based solution.
<style>
input[type="text"]:focus + input[name="submitButton"]{
visibility: hidden;
}
</style>
<input type="text" />
<input type="submit" name="submitButton" />
If I add the additional two statements between the two tags it fails to work.
<input type="text" />
<br/><br/>
<input type="submit" name="submitButton" />
I know I could use jQuery but i would prefer a CSS solution.
Thanks.
man... i solved your problem
HTML
<input type="text" />
<br/><br/>
<input type="submit" class="btn" name="submitButton" />
CSS
input[type=text]:focus ~ input[type=submit]
{
visibility:hidden;
}
vote if it helps
Target the submit button with a class... dont give input[name,=""]
.
Instead give classname... i think + selector is the problem.. it is searching for immediate adjacent input tags..and it fails to fetch becoz of br tag inbetween....
So target with classname
You can keep your CSS and add the line break spacing for the text field in CSS. See an example without having to use<br> tags.
input[type="text"]:focus+input[name="submitButton"] {
visibility: hidden;
}
input[type="text"] {
display: block;
margin-bottom: 15px;
}
<input type="text" />
<input type="submit" name="submitButton" />
I have a simple form like this:
<form method="post" action="/registration">
<label for="alias">Alias:</label>
<input type="text" name="alias" id="alias">
<br>
<label for="email">E-mail:</label>
<input type="text" name="email" id="email">
<br>
<input type="button" value="registger">
</form>
It works fine, but the I have found out that <br> shouldn't be used for this purpose, as it is only intended to be used with text.
If I remove the <br>, then everything will be rendered on a single line, which I do not want.
What is the correct, most clean way to display name-input pairs in a form with CSS, like this:
Alias: [__field__]
E-mail: [__field__]
[SUBMIT BUTTON]
I'd use divs, which will put the labels and inputs into their own block.
<form method="post" action="/registration">
<div>
<label for="alias">Alias:</label>
<input type="text" name="alias" id="alias">
</div>
<div>
<label for="email">E-mail:</label>
<input type="text" name="email" id="email">
</div>
<input type="button" value="registger">
</form>
I typically would put the input inside of the label (so when you click the label, it focuses the input), and then tell the label to be display: block;.
So,
<form method="post" action="/registration">
<label for="alias">
Alias: <input type="text" name="alias" id="alias">
</label>
<label for="email">
E-mail: <input type="text" name="email" id="email">
</label>
<input type="button" value="registger">
</form>
Then do:
label[for], // just selects labels that have the "for" attribute.
input[type="button"] {
display: block;
// And a bottom margin for good measure :)
margin: 0 0 10px; // shorthand for margin-bottom
}
And that should get you what you want.
You could use divs with corresponding CSS:
.myFrm {
width: 250px;
}
input[type=text] {
float: right;
}
.form-group {
margin-bottom: 10px;
}
.form-group::after {
content: "";
clear: both;
display: table;
}
<form method="post" action="/registration">
<div class="myFrm">
<div class="form-group">
<label for="alias">Alias:</label>
<input type="text" name="alias" id="alias">
</div>
<div class="form-group">
<label for="email">E-mail:</label>
<input type="text" name="email" id="email">
</div>
</div>
<input type="button" value="registger">
</form>
I would just use a bit of css to do the trick. Give each of the labels a display:block;
label {
display: block;
}
You can use container divs around the label and input to group them or else make sure "display: block" is added to the label and input elements.
If you need the label to the left of the input then wrap both with a container div and to give you more control on the positioning you could float the label and input to the left or use flexbox.
You ask:
What is the correct, most clean way to display name-input pairs in a
form with CSS
I interpret your question to be related to matters of performance, code efficiency and maintainability. Since just changing the HTML structure does not address responsiveness in different view-ports, adding bits of CSS may have render blocking features but it does nevertheless makes your application ready for mobile responsiveness. This is how I see it:
form {
display: inline-block;
}
label {
margin: 10px;
font-weight: 600;
}
input{
position: absolute;
left: 15%;
}
input[type=button]{
top: 4%;
}
Note that for mobile viewports you may want to adjust the relative measures with media queries. So the question here is not about writing less code but the main requirements of the application.
Get a plunk for this here
What you have there is a list.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists
http://reisio.com/temp/form1.html
I'm trying to put some input elements (~7) in the same line.
I have the following code:
<form>
<b> One </b>
<input type="number" style = "width: 5%; vertical-align:top" class="form-control" name="quantity" value="1" >
</form>
<form>
<b> Two </b>
<input type="number" style = "width: 5%; vertical-align:top" class="form-control" name="quantity" value="1" >
</form>
<form>
<b> Three</b>
<input type="number" style = "width: 5%; vertical-align:top" class="form-control" name="quantity" value="1" >
</form>
The problem is that every input every input has it own line, and it not in the same line.
Edit: Also, I wish that it will be with space in that way that the inputs elements would comprehend the whole line.
Hoe can I do it?
Change the display, remove the inline styles. Example: http://jsfiddle.net/ys1Lgj7e/
form {
display:inline-block;
}
Your input elements should all share the same form, and your styling can be modified & put into CSS, which will simplify your code significantly.
Here's a working example:
http://jsfiddle.net/u4utpu6c/
HTML
<form>
<input type="number" />
<input type="number" />
<input type="number" />
</form>
CSS
input {
display: inline;
width: 5%;
vertical-align:top;
}
Set every form tag to 'display: inline;'
In that html file:
<style>
form {
display: inline;
}
</style>
OR in your css file:
form {
display: inline;
}
OR each tag :
<form style="display: inline;">
For some reason I cant get CSS to work with my form? I have tried just about everything and I cant seem to find the issue? What am I doing wrong?
My HTML Structure
<div class="login-container">
<form>
<fieldset>
<label for="email">Email:</label>
<input type="text" name="email" class="input" id="email" />
<br /><br />
<label for="pword">Password:</label>
<input type="text" name="pword" id="pword" />
</fieldset>
</form>
</div>
My CSS Structure
.login-container fieldset {
padding: 1em;
}
.login-container label {
float:left;
width:25%;
margin-right:0.5em;
padding-top:0.2em;
text-align:right;
font-weight:bold;
}
.input {
background-color:#F00;
}
Remove the . in front of your input selector.
input {
background-color:#F00;
}
See also: CSS element selector vs. CSS .class selector
Seems to work just fine, please see jsfiddle.net/4FCgc/
What is not working? Maybe it is your web browser's cache... But I doubt that.
I have a very simple HTML layout I'm trying to implement. It is something like this:
A Label: [Input ]
Another Label: [Input ]
The Last Label: [Input ]
In the past, I'd just go ahead and use a table for this. Otherwise, it's a pain getting the input controls to line up correctly.
Can anyone suggest a simple and reliable way to implement this layout without using a table?
Thanks.
You can use display: inline-block
<style type="text/css">
label { display: inline-block; width: 200px; }
ul { list-style: none; }
</style>
<ul>
<li><label for="input1">A Label:</label> <input type="text" name="input1" id="input1"></li>
<li><label for="input2">Another Label:</label> <input type="text" name="input2" id="input2"></li>
<li><label for="input3">The Last Label:</label> <input type="text" name="input3" id="input3"></li>
</ul>
However, in order for this to line up vertically, you either have to wrap the label-input pairs in another tag (such as <li> or <div>) or put linebreaks after the inputs.
<style>
label { width: 200px; float:left; clear:left; }
input { float:left;}
</style>
<form>
<label for="fullname">Full Name:</label>
<input type="text" name="fullname" id="fullname">
<label for="email">Email Address:</label>
<input type="text" name="email" id="email">
</form>
With the added benefit that, if the horizontal space isn't sufficient, the inputs will wrap below the labels.
http://jsbin.com/anuziq (narrow down your browser window)
If you don't actually want them to wrap around, I suggest this approach:
<style>
label { white-space: nowrap; }
span { width: 200px; display: inline-block; }
</style>
<form>
<label>
<span>Full Name:</span>
<input type="text" name="fullname">
</label>
<label>
<span>Email Address:</span>
<input type="text" name="email">
</label>
</form>
From my experience, structuring the HTML like that usually allows for any layout you can possibly think of. Want the inputs always below the label? Use display:block on the span elements. Want the text to the right of the input? Just use float:right on the span.
Bonus here is that you don't need the for and id attributes to connect the label with the input. They're only really necessary, if you can't put the label right next to the input, like in 2 separate table cells.