I was making a login form with animations. If there is only one input field, it works perfect but when I add other input fields, they overlap with each other and the animations don't work properly. The submit button and checkbox gets hidden.
<div class="form">
<div class="inputs">
<input type="text" autocomplete="off" name="name" placeholder=" " required>
<label for="name" class="label-name">
<span class="content-name">username</span>
</label>
<input type="password" name="name" placeholder=" " required>
<label for="name" class="label-name">
<span class="content-name">password</span>
</label>
<div class="hide">
<input type="checkbox" onclick="myFunction()">Show Password
</div>
<button>Login</button>
</div>
</div>
Here is the jsfiddle: https://jsfiddle.net/j2dteaz0/1/
Any help is appreciated. Thanks
Absolute positioning require to use a relative positioning on a parent element.
.inputs > div {
position: relative;
}
.inputs input[type="text"], .inputs input[type="password"]{
...
Edited Fiddle
edit 1 CSS rules for specified input type only
Change the following CSS property as this;
.form{
position: relative;
height: 50%;
width: 50%;
}
Related
I have some code on a processwire website, I'm adding new css to a form and I want to hide the label for text and textarea inputs, but show the label on everthing else.
This hides the label (class is InputfieldHeader) :
#FormBuilder_contact-form .Inputfield .InputfieldHeader {
display: none;
}
I tried using label[for="type=text"],
I also tried .InputfieldHeader input([type=text])
but I cannot seem to get the css to work and googling hide label with CSS just doesn't bring up anything relevant.
This is the html for one of the form fields:
<div class="Inputfield Inputfield_company_registration_number InputfieldText InputfieldStateRequired InputfieldColumnWidth" style="width: 50%;" id="wrap_Inputfield_company_registration_number" data-original-width="50">
<label class="InputfieldHeader InputfieldStateToggle" for="Inputfield_company_registration_number">Company Registration Number</label>
<div class="InputfieldContent ">
<input id="Inputfield_company_registration_number" class="required InputfieldMaxWidth" name="company_registration_number" type="text" maxlength="2048" placeholder="Company Registration Number (If applicable)">
</div>
</div>
I've got 53 form fields so I was hoping to avoid using css for label for field1, label for field2 etc
Any ideas?
Checkout this example--
HTML-
<label for="a">Label A</label>
<input type="text" id="a">
<label for="b">Label B</label>
<input type="text" id="b">
<label for="c">Label C</label>
<input type="text" id="c">
CSS-
label[for='a'], label[for='b'] {
display: none;
}
This code snippet hide labels for A and B input.
Based on your code
label[for='Inputfield_company_registration_number'] {
display: none;
}
this will work fine.
The HTML structure needs to change if you want a CSS only solution. The label needs to come after the input/textarea and the input/textarea can't have a parent -- basically label and input need to be siblings, and label needs to come after input, it's the squiggly ~ that makes this possible (read more about Subsequent-sibling combinator if interested)
.input-field { display: flex }
.input-field label { margin-right: 1rem; order: -1 }
.input-field input[type=text]~label, .input-field textarea~label { display: none }
<div class="input-field">
<input type="text" id="textInput" placeholder="text input">
<label for="textInput">Text Input</label>
</div>
<div class="input-field">
<input type="number" id="numberInput" placeholder="number input">
<label for="numberInput">Number Input</label>
</div>
<div class="input-field">
<input type="password" id="passInput" placeholder="p455w0rd input">
<label for="passInput">Password Input</label>
</div>
<div class="input-field">
<input type="email" id="emailInput" placeholder="01#email.input">
<label for="emailInput">Email Input</label>
</div>
<div class="input-field">
<textarea id="textareaInput">Textarea</textarea>
<label for="textareaInput">Textarea Input</label>
</div>
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
Suppose I have a web page with a form:
<form>
<label for="FirstName">First:</label>
<input name="FirstName" type="text">
<label for="MiddleName">Middle:</label>
<input name="MiddleName" type="text">
<label for="LastName">Last:</label>
<input name="LastName" type="text">
</form>
If I size the browser window small enough, I get a line break between the label that says "Middle:" and the "MiddleName" input. It would be better to put a break between labels and input fields that are not related, e.g. break between "FirstName" input and label for "MiddleName", and/or between input "MiddleName" and label for "LastName". Obviously I can add <br/> tags, but is there a good way to keep the related items together, and still use only 1 line when the browser window is wide enough?
I realize this is a contrived example, but this is pattern I am having trouble with in several more complicated real world forms.
Put the inputs inside the labels, you don't even need the for attributes. Then style the labels with white-space: nowrap to prevent automatic line breaks.
label { white-space: nowrap; }
<form>
<label>First: <input name="FirstName" type="text"></label>
<label>Middle: <input name="MiddleName" type="text"></label>
<label>Last: <input name="LastName" type="text"></label>
</form>
Surround the related elements within an wrapper and then prevent line breaks inside the wrapper with CSS:
.wrapper {
white-space: nowrap;
}
<form>
<span class="wrapper">
<label for="FirstName">First:</label>
<input name="FirstName" type="text" />
</span>
<span class="wrapper">
<label for="MiddleName">Middle:</label>
<input name="MiddleName" type="text" />
</span>
<span class="wrapper">
<label for="LastName">Last:</label>
<input name="LastName" type="text" />
</span>
</form>
You can surround each set with a wrapper that is display: inline-block;
.wrap {
display: inline-block;
/* Only include this if
you don't want the text within the spans
to wrap when the window is small enough
*/
white-space: nowrap;
}
<form>
<span class="wrap">
<label for="FirstName">First:</label>
<input name="FirstName" type="text" />
</span>
<span class="wrap">
<label for="MiddleName">Middle:</label>
<input name="MiddleName" type="text" />
</span>
<span class="wrap">
<label for="LastName">Last:</label>
<input name="LastName" type="text" />
</span>
</form>
I use getuikit for form styling, they do it with something like this:
HTML
<label>My label</label>
<div class="controls"><input type=text/></div>
CSS
label {
float:left;
margin-top:5px; //to center the label vertically
width: 200px;
}
.controls {
margin-left:200px;
}
It doesn't break semantics. Putting input inside label is little strange :)
I am trying to get a better handle on CSS positioning by using only basic positioning properties. The goal is to get an HTML5 input and it's associated label to line up horizontally, one pair on each row, with the label on the left and input on the right. Essentially there will appear to be two columns, one for labels and the other for inputs.
I also want each column to be left-justified, which is where I'm currently stuck.
Using the CSS below I can get the two-column look I want, however none of the input elements are justified correctly.
If I set the position of the input elements to absolut, however (the thinking that adjusting the left property will align each element the same pixel length from the left containing edge), each element justifies properly, however all on the same row.
Any hints as to how to accomplish the two-column/left-justified layout w/o using tables or grid-column?
Fiddle: http://jsfiddle.net/fjwy3Lov/
CSS
/*Styles for basic form label and input elements*/
.basicForm{
margin: 10px 0 10px 10px;
}
.basicForm label{
float:left;
clear:left;
margin:inherit;
}
.basicForm input{
position:relative;
left:100px;
float:left;
margin: inherit;
}
HTML
<!DOCTYPE html>
<head>
<title>Form Validation Demo</title>
<link href="form.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>HTML 5 Input Types and Form Validation</h1>
<form class="basicForm">
<label for="UserName">User Name:</label>
<input type="text" id="UserName" required="required">
<label for="Password">Password:</label>
<input type="password" id="Password" required="required" />
<label for="UserEmail">Email:</label>
<input type="email" id="UserEmail">
<label for="PhoneNumber">Phone Number:</label>
<input type="tel" id="PhoneNumber">
<label for="Website">Homepage:</label>
<input type="url" id="Website">
<label for="Quantity">Quantity:</label>
<input type="number" id="Quantity" min="1" max="10" step="1" pattern="/\d/">
<label for="StartDate">Start Date:</label>
<input type="date" id="StartDate" min="2000-01-02" max="2016-01-01">
<label for="FavColor">Favorite Color:</label>
<input type="color" id="FavColor">
<label for="CurrentMonth">Current Month:</label>
<input type="month" id="CurrentMonth">
<label for="CurrentWeek">Current Week:</label>
<input type="week" id="CurrentWeek">
<label for="CurrentTime">Current Time:</label>
<input type="time" id="CurrentTime">
<input type="button" id="submit" value="submit">
</form>
</body>
</html>
This happens because as per your CSS all input elements are 150px to the left of the corresponding label but those are not the same width, so your inputs are not aligned.
You need to make all labels the same width:
.basicForm label{
float:left;
clear:left;
min-width:150px;
}
.basicForm input{
float:left;
}
Instead of min-width you could also use width, whichever you prefer.
If you insist on using absolute positioning, you could wrap each label/input pair in a div so you don't need to position each element individually, check this example:
.input-group {
position: relative;
height:2em;
}
.input-group label {
position: absolute;
top: 0;
left: 0;
}
.input-group input {
position: absolute;
top: 0;
left: 100px;
}
<div class="input-group">
<label>Label 1</label>
<input type="text">
</div>
<div class="input-group">
<label>longer Label</label>
<input type="text">
</div>
<div class="input-group">
<label>short</label>
<input type="text">
</div>
I want to add "month" after the input in bootstrap, in the side of it.
I've tried span, pull-left nothing worked. Months is always below
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Months</label>
<input type="email" class="form-control" style="width: 50%" id="exampleInputEmail1" placeholder="Months"> months
</div>
</form>
JSFIDDLE
Just add form-inline to your form..
<form role="form" class="form-inline">
<div class="form-group">
<label for="exampleInputEmail1">Months</label>
<input type="email" class="form-control" style="width: 50%" id="exampleInputEmail1" placeholder="Months"> months
</div>
</form>
Demo: http://www.bootply.com/119625
Try wrapping the elements and specifying the column widths:
HTML
<form role="form">
<div class="form-group">
<div class="pull-left col-xs-9">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<span class="col-xs-3">months<span>
</div>
</form>
CSS
span{
margin-top: 25px;
}
JS Fiddle: http://jsfiddle.net/7rYp7/2/
putting style="display:inline" into the actual input element in question has worked for me.
Listen, I know we are supposed to avoid using style and only use classes defined in CSS but I tried all the example above and this is the only thing that worked.
You can set the following in your CSS (overwriting the bootstrap.css)
.form-group input {
display:inline;
width: 50%;
margin: 5px;
}
You can also use a different selector to be more specific (instead of overwriting it for all inputs) UPDATED:
#exampleInputEmail1{
display:inline;
width: 50%;
margin: 5px;
}
.form-group label {
display: block;
}