Imagine a scenario where there are 10 input fields, each preceded by a span tag on the left side indicating what should be entered. While working on this setup, I encountered an issue - how can I create a consistent space between the span tag and the input field, regardless of the text length?
For example:
After encountering fatigue from typing out ids for every label/input pair in form building, I decided to change my approach. By nesting the input directly within the label, I found that functionality remains intact without the need for individual ids. Additionally, I utilized the flexibility of flexbox to streamline the process.
HTML Structure:
<label>
Short label <input type="text" name="dummy1" />
</label>
<label>
Somewhat longer label <input type="text" name="dummy2" />
</label>
<label>
Very lengthy label for testing purposes <input type="text" name="dummy3" />
</label>
CSS Styling:
label {
display: flex;
flex-direction: row;
justify-content: flex-end;
text-align: right;
width: 400px;
line-height: 26px;
margin-bottom: 10px;
}
input {
height: 20px;
flex: 0 0 200px;
margin-left: 10px;
}
Check out the Fiddle DEMO here!
If you're looking for an alternative to using span, consider utilizing label, which is designed to be paired with inputs and offers additional functions like focusing the input when clicked.
Below is an example of how this can be implemented:
HTML Markup:
<label for="dummy1">Title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">Longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">Even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
Related CSS Styles:
label {
width:180px;
clear:left;
text-align:right;
padding-right:10px;
}
input, label {
float:left;
}
One way to achieve this is by making use of the latest CSS feature called display: grid (browser support)
Here's an example of the HTML:
<div class='container'>
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
</div>
And here's a snippet of the CSS:
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
With css grid, elements are arranged column by column then row by row. The grid-template-columns property defines two grid columns, where one takes up 1/4 of the total horizontal space and the other takes up 3/4 of it, achieving the desired layout.
You can create a form using HTML and CSS
<form>
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" value="John">
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" value="Travolta">
</form>
To see the final outcome, visit: https://i.sstatic.net/ST3PD.png
Below is an example of code that you can utilize:
<html>
<head>
<style>
.labelClass{
float: left;
width: 113px;
}
</style>
</head>
<body>
<form action="yourclassName.jsp">
<span class="labelClass">First name: </span><input type="text" name="fname"><br>
<span class="labelClass">Last name: </span><input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
This code snippet has been really effective for me:
label{
font-size: 18px;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 400px;
}
If you need to create blank spaces within a label, you can use the 'pre' tag. This allows you to input the exact number of spaces you require easily.
<form>
<label>First Name :<pre>Simply enter the desired number of spaces using the spacebar</pre>
<input type="text"></label>
<label>Last Name :<pre>Match the number of spaces entered above by adding them here as well</pre>
<input type="text"></label>
</form>
I hope you find this solution helpful and efficient for your needs!
I have a ng-template that I utilize to generate a modal with a form on top of one of my other components like this: <div> <h1>Main component content...</h1> <button (click)="modals.show(newthingmodal)">Create New T ...
Currently, I have a form that displays a list of stars (stellar objects) with a <select> control and two <inputs>. I am seeking guidance on how to populate the two inputs from the database when the user changes the selection in the <select&g ...
I am struggling with the code below which contains numbers inside the values: What I need is to modify all instances of the following codes: <option value="1" class="sub_1"> To look like this: <option value="" id="1" class="sub_1"> Basical ...
My website code is pretty standard <div class="header"></div> <div class="site-inner"></div> <div class="footer"></div> How can I achieve a header background like the one shown in the image? Do I need to set the entire ...
I am attempting to display only the first tr in the table and hide all other tr elements by default. I have tried using ng-show and ng-hide but it does not seem to be working as expected. This is not originally my plunker; I used it for reference on group ...
I'm trying to figure out if there's a more efficient method for storing data within HTML content. Currently, I have some values stored in my HTML file using hidden fields that are generated by code behind. HTML: <input type="hidden" id="hid1 ...
Is there a way to change the default message that appears when submitting an empty HTML text input? I would like the box border to turn red instead. Can anyone help me achieve this? Below is the code for the text input box: <div class="input-group ...
Is there a way to position the a element at the top and the button at the bottom, using only flex properties without absolute or fixed positioning? Currently, the button is at the bottom but the title is not at the top: .all { display: flex; hei ...
I'm having trouble implementing Bootstrap in my Django project's shared HTML file. The dropdown list isn't functioning properly despite trying various approaches, including using CDN and local Bootstrap files. When I click on the dropdown li ...
Incorporating the jQuery UI framework into my ASP.NET project is a current challenge I am facing. My approach involves applying CSS to the controls in order to achieve this objective. Specifically, I have multiple GridView controls that need styling. Is t ...
Looking to create a website similar to CodePen? I have developed a library of assets including buttons, cards, and effects, all built using vue.js. Each asset includes HTML, CSS, and sometimes JS code. In my vanilla JS version, I formatted the code using e ...
I have encountered a problem with a simple modal that allows users to upload a file using a browse button. Due to some unknown issue, possibly related to the fact that it is an HTML5 file input and the browser adds its own functions to it, testing this has ...
I am having trouble printing the nivo slider (default-theme): Despite trying for a few days, I still can't figure out why it's not working. I have attempted solutions like #slider { visibility: visible; width: 950px; height: 35 ...
I am currently attempting to scrape data from the webpage: "https://esco.ec.europa.eu/en/classification/skill_main". Specifically, I want to click on all the plus buttons under S-skills until no more plus buttons can be found, and then save the page source ...
Take a look at this simple HTML snippet on this fiddle that illustrates a specific layout on wide desktop screens: Here is the code responsible for rendering the above layout: <div class="container"> <div class="row"> <div class="col-md-4" ...
Let's dive deeper into this concept: <li class="whatever"> <img src="/images/clients/something.jpg"> </li> <li class="whatever"> <img src="/images/clients/whatever.png"> </li> He ...
I am facing an issue where I have a button with an anchor element that I need to trigger with the spacebar key for accessibility purposes. However, instead of triggering the button, pressing the spacebar causes the page to jump down when the button is in f ...
Currently, I am honing my skills in using flexbox to create footers. Although the footer layout I have designed looks great on a desktop screen, it unfortunately doesn't display correctly on mobile devices. You can view the footer layout I have been ...
I have a unique idea for a games website that I want to share. It's a bit difficult to explain, so please bear with me as I try to convey my vision! The inspiration for this project comes from a website called . Have you seen it before? The concept i ...
Is it possible to benefit from HTTP conditional requests when including a script in the head section of a page? My goal is to cache dynamically downloaded JavaScript files that are added to the head section using script tags. If this approach isn't fe ...