I have little problem and don't know why it doesn't work. I tried to change font size for label tag, but I can't set less than 10px. Why?
.group {
margin-bottom: 20px;
}
.group label {
font-size: 10px;
}
.group2 label {
font-size: 8px;
}
<div class="group">
<label for="input1">First label</label>
<input type="text" name="input1">
</div>
<div class="group group2">
<label for="input2">Second label</label>
<input type="text" name="input2">
</div>
I have tested this one on my side and it works as intended.
If you are loading the styles via a stylesheet it is possible that your browser has cached this, and you may need to clear browser caches.
Some browsers do also supply default values for most HTML elements. (Something to consider)
EDIT: It turned out that cached CSS in Opera was responsible non-updating styling.
Working as required. Remember to re-run your code snippet after making changes.
.group {
margin-bottom: 20px;
}
.group label {
font-size: 10px;
}
.group2 label {
font-size: 4px;
}
<div class="group">
<label for="input1">First label</label>
<input type="text" name="input1">
</div>
<div class="group group2">
<label for="input2">Second label</label>
<input type="text" name="input2">
</div>
Related
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 know you can use display:inline but it doesn't seem to be working in this case. Maybe it has something to do with display:block for the inputs and labels.
My inputs and labels are moving down diagonally relative to one another.
See screencast: http://screencast.com/t/pFGzbRvTSy
input, label {
display: block;
margin-top: 5px;
vertical-align: top;
}
input {
display: inline;
float: left;
margin-right: 10px;
}
<label for="start age">START AGE</label>
<input type="number" name="start age"></input>
<label for="retirement age">RETIREMENT AGE</label>
<input type="number" name="retirement age"></input>
<label for="current income">CURRENT INCOME</label>
<input type="number" name="current income"></input>
<label for="inflation">INFLATION</label>
<input type="number" name="inflation"></input>
<label for="monthly disability benefit">MONTHLY DISABILITY BENEFIT</label>
<input type="number" name="monthly disability benefit"></input>
Yep, the explanation for this one is easy too, you have a display: inline property that gets overwritten by float: left since float: left makes your element a block again by setting display: block and applying other positioning.
One of the effects is that a floated element and a block element can exist in one line.
The other fact is that your label is display: block which will cause it to fill the entire screen width.
What happens then is the next element which is a float: left label gets pushed down one line and the label floats next to it taking up the rest of the horizontal space, this continues to create that stair effect that you're seeing.
To solve it and have the inputs and labels next to each other the best thing you could do is wrap each <input> and <label> within a <div> with a class and apply float: left to that div.
e.g.
.float-left {
max-width: 20%; /*added this for illustration*/
float: left;
}
label, input {
display: block;
padding: 4px;
}
<div class="float-left">
<label for="start_age">START AGE</label>
<input type="number" name="start_age" />
</div>
<div class="float-left">
<label for="retirement_age">START AGE</label>
<input type="number" name="retirement_age" />
</div>
<div class="float-left">
<label for="current_income">START AGE</label>
<input type="number" name="current_income" />
</div>
<div class="float-left">
<label for="inflamation">START AGE</label>
<input type="number" name="inflamation" />
</div>
<div class="float-left">
<label for="monthly_disability_benefit">START AGE</label>
<input type="number" name="monthly_disability_benefit" />
</div>
P.S.
I changed the for and name attributes of the fields to no longer have whitespace but using _ (underscore) characters instead - this just makes sure that your labels get understood correctly. It is usually a good idea to avoid spaces wherever you can with those kinds of things.
And as also stated in the comments, I removed the closing </input> tags as the <input /> tag is a self-closing empty tag
Oops sorry, I looked at the screencast and saw what you needed so I added that as well. (See second snippet at the bottom of this answer).
1 - 6 still apply.
In addition:
Add a <br/> after the text of the <label>
There's no closing tag for <inputs/> </input>
If you place your <inputs> inside your <label>, the text will line up in conjunction with vertical-align: baseline (see below)
I believe the for attribute targets id only, for doesn't associate with name.
float: left deleted, floats are archaic and delicate. If used incorrectly, they cause a horrific illogical mess of layouts (as it already has done to yours).
Made the width of inputs to the size of expected content (don't need 15 digits for age).
As a matter of aesthetics, don't use upper caps, I added a touch of class by using font-variant: small-caps ;-)
Relevant CSS
label {
display: inline-block;
margin: 5px;
vertical-align: baseline;
line-height: 1.5;
font-size: 16px;
font-variant: small-caps;
}
input {
display: inline-block;
line-height: 1.5;
padding: 0 3px;
}
I know this demo is just a demo, but if you get in the habit of doing little things, it becomes second nature and won't slow you down.
label {
display: inline-block;
margin: 5px;
vertical-align: baseline;
line-height: 1.5;
font-size: 16px;
font-variant: small-caps;
}
input {
display: inline-block;
line-height: 1.5;
padding: 0 3px;
}
#startAge {
width: 32px;
}
#retirementAge {
width: 32px;
}
#currentIncome {
width: 84px;
}
#inflation {
width: 64px;
}
#monthlyDisabilityBenefit {
width: 84px;
}
<label for="startAge">Start Age
<input type="number" id="startAge"></label>
<label for="retirementAge">Retirement Age
<input type="number" id="retirementAge"></label>
<br/>
<label for="currentIncome">Current Income
<input type="number" id="currentIncome"></label>
<br/>
<label for="inflation">Inflation
<input type="number" id="inflation"></label>
<br/>
<label for="monthlyDisabilityBenefit">Monthly Disability Benefit
<input type="number" id="monthlyDisabilityBenefit"></label>
label {
display: inline-block;
font-variant: small-caps;
}
input {
width: 185px;
}
<label for="startAge">Start Age
<br/>
<input type="number" id="startAge">
</label>
<label for="retirementAge">Retirement Age
<br/>
<input type="number" id="retirementAge">
</label>
<label for="currentIncome">Current Income
<br/>
<input type="number" id="currentIncome">
</label>
<label for="inflation">Inflation
<br/>
<input type="number" id="inflation">
</label>
<label for="monthlyDisabilityBenefit">Monthly Disability Benefit
<br/>
<input type="number" id="monthlyDisabilityBenefit">
</label>
i hope it will help i also added <br> tag with every line to get the the text box and label vertical
input, label {
margin-top: 5px;
}
input {
display: inline;
margin-right: 10px;
}
<label for="start age">START AGE</label><br>
<input type="number" name="start age"></input><br><br>
<label for="retirement age">RETIREMENT AGE</label><br>
<input type="number" name="retirement age"></input><br><br>
<label for="current income">CURRENT INCOME</label><br>
<input type="number" name="current income"></input><br><br>
<label for="inflation">INFLATION</label><br>
<input type="number" name="inflation"></input><br><br>
<label for="monthly disability benefit">MONTHLY DISABILITY BENEFIT</label><br>
<input type="number" name="monthly disability benefit"></input><br><br>
I have a page at http://zackelx.com/50/SO_a9.html with a BUY button. When you go to the page with Chrome and click the button a checkout form comes up where the blue Pay button is located correctly under the last input field:
But if you go to the page with Safari you get:
I'm using Safari 5.1.7 on a Windows 7 machine.
The HTML for the checkout form around the Pay button is:
<label id="instr">instr</label>
<input type="text" id="instructions" placeholder="size, color, etc."/><br />
<div class="button">
<div class="inner">
<button type="submit">
<span class="pay_amount">123</span>
</button>
</div>
</div>
The browser should place div.button underneath the input#instructions element, and Chrome does that. But Safari places it a few pixels down from the top of the input element, as if div.button had a style something like position:relative; top:-20px. But there's nothing like that, and using the Safari inspector I don't see anything that would keep div.button from being placed completely under input#instructions.
Does anyone see what's going on here?
whole code for the pop up form:
<form action="" method="POST" id="checkout_form" autocomplete="off">
<label id="state">state</label>
<input type="text" size="20" id="checkout_form_state" class="state generic" placeholder="NY" autocomplete="" required=""><br>
<label id="cc">cc#</label>
<input type="text" size="20" id="checkout_form_cc_number" class="cc-number" x-autocompletetype="cc-number" required=""><br>
<label id="exp">exp</label>
<input type="text" id="checkout_form_cc_exp" class="cc-exp" x-autocompletetype="cc-exp" placeholder="MM/YY" required="" maxlength="9">
<label id="CVC">cvc</label>
<input type="text" class="cc-cvc" x-autocompletetype="cc-csc" placeholder="CVC" required="" maxlength="4" autocomplete=""><br>
<label id="instr">instr</label>
<input type="text" id="instructions" placeholder="black"><br>
<div class="button">
<div class="inner">
<button type="submit">
<span class="pay_amount">Pay $12.00</span>
</button>
</div>
</div>
<img id="padlock" src="https://zackel.com/images/padlock_30.jpg" alt="padlock">
<img id="creditcards" src="https://zackel.com/images/creditcards.jpg" alt="creditcards">
<div id="validation"></div>
</form>
css:
#checkout_form {
position: relative;
top: 24px;
left: 43px;
width: 224px;
display: inline;
}
You are seeing Safari-specific rendering issues related to the positioning used.
Solution:
You don't need to change any of the HTML, just overwrite the CSS by placing the following CSS at the end of your stylesheet:
I tested it in Safari (Windows) v5.1.7, and it seems to work fine.
For the #checkout_form element, top: auto/left: auto are used to reset the positioning that was previously being used. I gave the element a width of 100%, and used padding to position the elements. box-sizing: border-box is used to include the padding in the element's width calculations. The vendor prefixes are used to support older browsers (-webkit- in Safari's case).
For the parent button wrapper element and the credit card image, margin: 10px 0 0 50px was essentially used to displace the element and centered it below the field elements. It's worth pointing out that text-align: center on the parent #checkout_form element was being used to center the elements.
I presume that you wanted the #padlock element hidden, thus display: none.
#checkout_form {
top: auto;
left: auto;
width: 100%;
display: block;
padding: 25px 38px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
#checkout_form .button,
img#creditcards {
margin: 10px 0 0 50px;
}
#checkout_form .button button {
position: static;
}
#checkout_form img#padlock {
display: none;
}
You have style for the form element
#checkout_form {
position: relative;
top: 24px;
left: 43px;
width: 224px;
display: inline;
}
display:inline; is what is causing the problem, and makes the button look like its floating. and not correctly rendered in safari. I dont know the cause of the issue in safari, but I have a workaround which works(I tried on on your website and it perfectly works on chrome and safari).
Change your markup a little, add a div tag inside the form to contain only the labels and the inputs but not the button you want to render on the next line.
<form action="" method="POST" id="checkout_form" autocomplete="off">
<div style="display: inline;">
<label id="email">email</label>
<input type="email" size="20" id="checkout_form_email" class="email generic" placeholder="john#comcast.net" required="" autocomplete=""><br>
<label id="phone">phone</label>
<input type="text" size="20" id="checkout_form_phone" class="phone generic" placeholder="(209) 322-6046" autocomple="" required=""><br>
<label id="name">name</label>
<input type="text" size="20" id="checkout_form_name" class="name generic" placeholder="John Doe" autocomplete="" required=""><br>
<label id="street">street</label>
<input type="text" size="20" id="checkout_form_street" class="street generic" placeholder="123 Maple St." autocomplete="" required=""><br>
<label id="city">city</label>
<input type="text" size="20" id="checkout_form_city" class="city generic" placeholder="San Jose" autocomplete="" required=""><br>
<label id="state">state</label>
<input type="text" size="20" id="checkout_form_state" class="state generic" placeholder="NY" autocomplete="" required=""><br>
<label id="cc">cc#</label>
<input type="text" size="20" id="checkout_form_cc_number" class="cc-number" x-autocompletetype="cc-number" required=""><br>
<label id="exp">exp</label>
<input type="text" id="checkout_form_cc_exp" class="cc-exp" x-autocompletetype="cc-exp" placeholder="MM/YY" required="" maxlength="9">
<label id="CVC">cvc</label>
<input type="text" class="cc-cvc" x-autocompletetype="cc-csc" placeholder="CVC" required="" maxlength="4" autocomplete=""><br>
<label id="instr">instr</label>
<input type="text" id="instructions" placeholder="black"><br>
</div>
<div class="button" style="display: inline-block;">
<div class="inner">
<button type="submit">
<span class="pay_amount">Pay $12.00</span>
</button>
</div>
</div>
<img id="padlock" src="https://zackel.com/images/padlock_30.jpg" alt="padlock">
<img id="creditcards" src="https://zackel.com/images/creditcards.jpg" alt="creditcards">
<div id="validation"></div>
</form>
I have wrapped your form with a div with style display-inline,
and add a style display:inline-block to the div in which you have wrapped your button.
<div class="button" style="display: inline-block;">
<div class="inner">
<button type="submit">
<span class="pay_amount">Pay $12.00</span>
</button>
</div>
</div>
remove the position relative css properties and add margin in your css.
**Previous code:**
#checkout_form button {
/* position:relative; */
/* top:9px; */
/* left:71px; */
height:34px;
width:180px;
/* background-image:linear-gradient(#47baf5,#2378b3); */
border:none;
border-radius: 6px;
/* blue gradient */
background: #17b4e8;
background: -moz-linear-gradient(#47baf5,#2378b3);
background: -webkit-linear-gradient(#47baf5,#2378b3);
background: -o-linear-gradient(#47baf5,#2378b3);
background: -ms-linear-gradient(#47baf5,#2378b3);/*For IE10*/
background: linear-gradient(#47baf5,#2378b3);
}
**New css:**
#checkout_form button {
height:34px;
width:180px;
/* background-image:linear-gradient(#47baf5,#2378b3); */
border:none;
border-radius: 6px;
/* blue gradient */
background: #17b4e8;
background: -moz-linear-gradient(#47baf5,#2378b3);
background: -webkit-linear-gradient(#47baf5,#2378b3);
background: -o-linear-gradient(#47baf5,#2378b3);
background: -ms-linear-gradient(#47baf5,#2378b3);/*For IE10*/
background: linear-gradient(#47baf5,#2378b3);
margin: 9px 0 0 71px;
}
I want to create a form so there is text on the left side and the inputs on the right, currently I am doing
<div id="labels">
<ul>
<li>The Label</li>
</ul>
</div>
<div id="inputs">
<ul>
<li><input type="text /></li>
</ul>
</div>
And the CSS
input[type=text] {
height: 14px;
}
#labels {
float: left;
}
#inputs {
float: right;
}
li {
padding-top: 4px;
padding-left: 10px;
}
// Text size is 14px
What happens is that the text and fields are not aligned perfectly (the inputs get progressively lower as I add items). I am thinking this is because not all the inputs can be 14px (I use drop downs, checkboxes, radios, etc.).
What would be the correct way to create this? I know a table would fix the problem but is that semantic?
This sort of question has been asked multiple times here in SO, you can do a simple search and find many solutions.
But here is a simple form to get you started:
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>
</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;
}
Here is a demo: http://jsfiddle.net/5aduZ/1/
A lot of people will not agree with my use of divs to separate the form elements but through testing i found this format to be the safest and surefire way to go about it as it separates the fields cleanly, and it works just fine under IE. Plus, it is the format used by the big boys (facebook, twitter, google).
It makes sense for the label to be next to the input in the HTML - it's easier to read and more maintainable. Typical HTML for this would be:
<div class="fieldWrapper">
<label for="something">Something</label>
<input type="text" id="something" name="something">
</div>
<div class="fieldWrapper">
<label for="something">Something</label>
<input type="text" id="something" name="something">
</div>
And CSS would be:
label, input {
float:left;
}
input {
font-size:14px;
padding: 2px; // instead of using fixed height
}
label {
width: 100px; // can use JavaScript if it needs to be dynamic
padding-top: 3px; // to make the label vertically inline with the input element
}
.fieldWrapper {
clear:left;
}
If you really can't change your HTML, you could set a CSS height on the <li> tag to fix the alignment problem. But I strongly recommend you to choose one of other proposed solutions, because your HTML is very hard to read in its current state. And you should use the <label> tag.
Write this <input type="text" name="firstname" /> and set the height width and padding
At my company, way back when we first started our first web application back in 2001, we used a table.
<table class="formTable">
<tbody>
<tr>
<td><label>Name:</label></td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td><label>E-mail:/label></td>
<td><input type="text" name="email" /></td>
</tr>
</tbody>
</table>
And while this works, philosophically I don't like the approach, because as far as I am concerned, a table should hold table-ized data.
You could use CSS and DIV's, as well:
<style>
.formLabel, .formInput {
display:inline-block;
}
</style>
<div class="formField">
<div class="formLabel"><label>Name:</label></div>
<div class="formInput"><input type="text" name="name" /></div>
</div>
<div class="formField">
<div class="formLabel"><label>E-Mail:</label></div>
<div class="formInput"><input type="text" name="email" /></div>
</div>
See here: http://jsfiddle.net/9P7pg/
Or, you could avoid the use of div's all together, and just apply the display: inline-block for each label and input (or use classes). But then you will also have to remember to use a breaking space for carriage returns in between the label-field combination.
there is a special list for this actually! it's called definition list (dl) and is comprised of definition terms and definition definitions (dt/dd). i usually put the text in the dt and the input box in the dd. like this:
<form action="bla">
<dl>
<dt>Name*</dt>
<dd><input type="text" name="name" />
<dt>Email</dt>
<dd><input type="text" name="email" />
</dl>
<p><input type="submit" /></p>
</form>
Let's say I have an html snippet like this:
<div style="width:300px;">
<label for="MyInput">label text</label>
<input type="text" id="MyInput" />
</div>
This isn't my exact code, but the important thing is there's a label and a text input on the same line in a fixed-width container. How can I style the input to fill the remaining width of the container without wrapping and without knowing the size of the label?
Here is a simple and clean solution without using JavaScript or table layout hacks. It is similar to this answer: Input text auto width filling 100% with other elements floating
It is important to wrap the input field with a span which is display:block. Next thing is that the button has to come first and the the input field second.
Then you can float the button to the right and the input field fills the remaining space.
form {
width: 500px;
overflow: hidden;
background-color: yellow;
}
input {
width: 100%;
}
span {
display: block;
overflow: hidden;
padding-right:10px;
}
button {
float: right;
}
<form method="post">
<button>Search</button>
<span><input type="text" title="Search" /></span>
</form>
A simple fiddle: http://jsfiddle.net/v7YTT/90/
Update 1: If your website is targeted towards modern browsers only, I suggest using flexible boxes. Here you can see the current support.
Update 2: This even works with multiple buttons or other elements that share the full with with the input field. Here is an example.
as much as everyone hates tables for layout, they do help with stuff like this, either using explicit table tags or using display:table-cell
<div style="width:300px; display:table">
<label for="MyInput" style="display:table-cell; width:1px">label text</label>
<input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>
I suggest using Flexbox:
Be sure to add the proper vendor prefixes though!
form {
width: 400px;
border: 1px solid black;
display: flex;
}
input {
flex: 2;
}
input, label {
margin: 5px;
}
<form method="post">
<label for="myInput">Sample label</label>
<input type="text" id="myInput" placeholder="Sample Input"/>
</form>
Please use flexbox for this. You have a container that is going to flex its children into a row. The first child takes its space as needed. The second one flexes to take all the remaining space:
<div style="display:flex;flex-direction:row">
<label for="MyInput">label text</label>
<input type="text" id="MyInput" style="flex:1" />
</div>
Easiest way to achieve this would be :
CSS :
label{ float: left; }
span
{
display: block;
overflow: hidden;
padding-right: 5px;
padding-left: 10px;
}
span > input{ width: 100%; }
HTML :
<fieldset>
<label>label</label><span><input type="text" /></span>
<label>longer label</label><span><input type="text" /></span>
</fieldset>
Looks like : http://jsfiddle.net/JwfRX/
Very easy trick is using a CSS calc formula. All modern browsers, IE9, wide range of mobile browsers should support this.
<div style='white-space:nowrap'>
<span style='display:inline-block;width:80px;font-weight:bold'>
<label for='field1'>Field1</label>
</span>
<input id='field1' name='field1' type='text' value='Some text' size='30' style='width:calc(100% - 80px)' />
</div>
you can try this :
div#panel {
border:solid;
width:500px;
height:300px;
}
div#content {
height:90%;
background-color:#1ea8d1; /*light blue*/
}
div#panel input {
width:100%;
height:10%;
/*make input doesnt overflow inside div*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/*make input doesnt overflow inside div*/
}
<div id="panel">
<div id="content"></div>
<input type="text" placeholder="write here..."/>
</div>
The answers given here are a bit outdated. So, here I'm with the easiest solution using modern flexbox.
.input-container{
display:flex;
}
input{
flex-grow: 1;
margin-left: 5px;
}
<div style="width:300px;">
<div class="input-container">
<label for="MyInput">label text: </label>
<input type="text" id="MyInput"/>
</div>
<div class="input-container">
<label for="MyInput2">Long label text: </label>
<input type="text" id="MyInput2" />
</div>
</div>
If you're using Bootstrap 4:
<form class="d-flex">
<label for="myInput" class="align-items-center">Sample label</label>
<input type="text" id="myInput" placeholder="Sample Input" class="flex-grow-1"/>
</form>
Better yet, use what's built into Bootstrap:
<form>
<div class="input-group">
<div class="input-group-prepend">
<label for="myInput" class="input-group-text">Default</label>
</div>
<input type="text" class="form-control" id="myInput">
</div>
</form>
https://jsfiddle.net/nap1ykbr/