Css label input margin

How to Align Labels Next to Inputs

When you create a web form, you’ll probably need to know how to align labels with inputs. Here, we’ll show how it’s possible to create right-aligned and left-aligned elements next to inputs.

Solutions with CSS properties

In our example below, we use three elements and place and elements within each of them. Note that we use a type attribute for each . We specify the margin-bottom of our element. Then, we set the display of the element to «inline-block» and give a fixed width. After that, set the text-align property to «right», and the labels will be aligned with the inputs on the right side.

Example of right aligning labels next to inputs with the text-align property:

html> html> head> title>Title of the document title> style> div < margin-bottom: 10px; > label < display: inline-block; width: 150px; text-align: right; > style> head> body> form action="/form/submit" method="post"> div> label>Short label> input type="text" /> div> div> label>Simple label label> input type="text" /> div> div> label>Label having more text label> input type="text" /> div> form> body> html>

Result

We can remove the text-align property, and the labels will be left-aligned by default. Let’s see an example, where we also add placeholder , id and name attributes on inputs and for attribute on labels. As a result, the input will be activated when a label is clicked.

Example of left aligning labels next to inputs:

html> html> head> title>Title of the document title> style> div < margin-bottom: 10px; > label < display: inline-block; width: 150px; > style> head> body> form action="/form/submit" method="post"> div> label for="name">Name label> input type="text" id="name" placeholder="Enter your name" /> div> div> label for="age">Your Age label> input type="text" id="age" name="age" placeholder="Enter your age" /> div> div> label for="country">Enter Your Country label> input type="text" id="country" name="country" placeholder="Country" /> div> input type="submit" value="Submit" /> form> body> html>

In our next example too, we’ll left-align the labels. Here, we also make the inline-block and give a fixed width. For the element, we add padding.

Example of left aligning labels next to inputs:

html> html> head> title>Title of the document title> style> div < margin-bottom: 10px; > label < display: inline-block; width: 110px; color: #777777; > input < padding: 5px 10px; > style> head> body> form action="/form/submit" method="post"> div> label for="name">Your name: label> input id="name" name="username" type="text" autofocus /> div> div> label for="lastname">Your Last name: label> input id="lastname" name="lastname" type="text" /> div> input type="submit" value="Submit" /> form> body> html>

Regarding the inclusion of input tags in label tags, this can be useful for accessibility purposes as it helps screen readers associate the label with the input field. However, it’s not strictly necessary and can add unnecessary markup to the HTML. It’s generally up to the designer or developer to decide whether to include input tags in label tags based on their specific needs and preferences.

Источник

Как сделать label внутри input?

Как сделать вот такой label или placeholder внутри input, чтобы он не исчезал

Для label используйте css:
margin-bottom: -20px;
Для input:
height: 80px;

Можно и по другому сделать конечно. Не забудьте посредством for и id атрибутов привязать элементы друг к другу.

а почему так не получается? codepen.io/dennyjuice/pen/NPjRYW
просто у меня там два инпута + чекбокс и сабмит, если прям вашим кодом, то тоже не так работает

Denis: дело в css селекторах, я использую оператор +, что значит, элемент, который идет непосредственно после данного (пример: div + p — параграф, который идет сразу за div ), иначе не получится

могу осмелиться предположить, что в примере любая область блока кликабельная. С div чтобы так сделать, прийдётся с геммороем поработать. мой вариант легче и проще.

Quber: Можно весь блок обернуть в label, а в него уже пихнуть инпут и подпись в спане. В итоге вся эта хренотень будет кликабельной. Собсвтенно, сам этот лейбл и его содержимое вполне можно сделать как на картинке и не будет семантически лишней разметки.

Источник

Как сделать label внутри input?

Как сделать вот такой label или placeholder внутри input, чтобы он не исчезал

Для label используйте css:
margin-bottom: -20px;
Для input:
height: 80px;

Можно и по другому сделать конечно. Не забудьте посредством for и id атрибутов привязать элементы друг к другу.

а почему так не получается? codepen.io/dennyjuice/pen/NPjRYW
просто у меня там два инпута + чекбокс и сабмит, если прям вашим кодом, то тоже не так работает

Denis: дело в css селекторах, я использую оператор +, что значит, элемент, который идет непосредственно после данного (пример: div + p — параграф, который идет сразу за div ), иначе не получится

могу осмелиться предположить, что в примере любая область блока кликабельная. С div чтобы так сделать, прийдётся с геммороем поработать. мой вариант легче и проще.

Quber: Можно весь блок обернуть в label, а в него уже пихнуть инпут и подпись в спане. В итоге вся эта хренотень будет кликабельной. Собсвтенно, сам этот лейбл и его содержимое вполне можно сделать как на картинке и не будет семантически лишней разметки.

Источник