Forcing label to flow inline with input that they label
put them both inside a div
with nowrap.
<div style="white-space:nowrap">
<label for="id1">label1:</label>
<input type="text" id="id1"/>
</div>
Prevent input label and input box from displaying on separate lines when resizing window
To achieve the effect you're looking for, use white-space: nowrap
.
form {
white-space: nowrap;
width: 100px; /* For Demo purposes */
border: 1px solid red; /* For Demo purposes */
}
<div class="rightCol">
<h1>Slope Intercept Form</h1>
<form>
<label for="x1">X1: </label>
<input id="x1" type="text" name="x1" maxlength="2" size="6">
<label for="y1">Y1: </label>
<input type="text" name="y1" maxlength="2" size="6">
<script>document.getElementById("y1").onblur=message;</script><br>
<label for="x2">X2: </label>
<input type="text" name="x2" maxlength="2" size="6">
<label for="y2">Y2: </label>
<input type="text" name="y2" maxlength="2" size="6"><br>
</form>
</div>
How to pin an input label to the top of the field?
you can use persistent-placeholder like below example
<v-text-field
value=""
label="Outlined"
outlined
persistent-placeholder
></v-text-field>
https://codepen.io/nilesh9836/pen/mdqPXOd?editors=101
How to make label and input appear on the same line on an HTML form?
Assuming you want to float the elements, you would also have to float the label
elements too.
Something like this would work:
label {
/* Other styling... */
text-align: right;
clear: both;
float:left;
margin-right:15px;
}
#form {
background-color: #FFF;
height: 600px;
width: 600px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 0px;
text-align:center;
}
label {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #333;
height: 20px;
width: 200px;
margin-top: 10px;
margin-left: 10px;
text-align: right;
clear: both;
float:left;
margin-right:15px;
}
input {
height: 20px;
width: 300px;
border: 1px solid #000;
margin-top: 10px;
float: left;
}
input[type=button] {
float:none;
}
<div id="form">
<form action="" method="post" name="registration" class="register">
<fieldset>
<label for="Student">Name:</label>
<input name="Student" id="Student" />
<label for="Matric_no">Matric number:</label>
<input name="Matric_no" id="Matric_no" />
<label for="Email">Email:</label>
<input name="Email" id="Email" />
<label for="Username">Username:</label>
<input name="Username" id="Username" />
<label for="Password">Password:</label>
<input name="Password" id="Password" type="password" />
<input name="regbutton" type="button" class="button" value="Register" />
</fieldset>
</form>
</div>
Is there a more efficient way to group-up a label with an input field so that they become block-like?
I suggest taking a look at existing frameworks like Bootstrap or Foundation that will provide you with a good base to start writing a responsive design.
For the record, a span
is an inline element hence you cannot define a width on it. Declare it as display: inline-block;
and you'll notice the width property is now respected.
Is it good practice to use label for non-input/non-interactive elements?
The <label>
tag defines a label for an <input>
element.
So use <span>
instead.
The for attribute associates the label with a control element, as defined in the description of label in the HTML 4.01 spec. This implies, among other things, that when the label element receives focus (e.g. by being clicked on), it passes the focus on to its associated control. The association between a label and a control may also be used by speech-based user agents, which may give the user a way to ask what the associated label is, when dealing with a control. (The association may not be as obvious as in visual rendering.
HTML specifications do not make it mandatory to associate labels with controls, but Web Content Accessibility Guidelines (WCAG) 2.0 do. This is described in the technical document H44: Using label elements to associate text labels with form controls, which also explains that the implicit association (by nesting e.g. input inside label) is not as widely supported as the explicit association via for and id attributes,
Related Topics
How to Make a Box with Arrow in CSS
CSS Difference Between Attribute Selectors with Tilde and Star
Twitter Bootstrap 3 How to Activate Navbar-Collapse on Small Devices
CSS Media Type Print Using Background-Color in Chrome
Gradient Effect for Triangle Shape Borders
CSS Styling - How to Put These Two Div Boxes Adjacent
CSS Positioning to Fill Container: Width VS. Left/Right
Applying Text-Decoration on CSS Generated Content in Ie
Should I Use More Than One CSS Sheet
Responsive Images Positioned Over Image
Sass Watching Multiple Directories
Are CSS Custom Properties Global Across Linked CSS Documents
Adding Custom CSS Tags to an Rmarkdown HTML Document
Facebook Like Widget on Fan Page, Comment Area Out of Visible Area