Html input label position

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.

Источник

Position Text Labels on Forms Using CSS

In this post, I’ll explain three common approaches to positioning text labels on web forms using CSS:

Using Top-positioned Text Labels

Positioning labels at the top of their form elements is probably the easiest layout to achieve, as we only need to tell the label to take up the entire width of its parent element.

As our form elements/labels are inside ordered list items (which are block elements), each pair will naturally fall onto a new line, as you can see from Figure 9. All we have to do is get the form elements and labels onto different lines.

This exercise is easily completed by turning the label elements into block elements, so that they’ll occupy an entire line:

It’s a simple change, but one which makes the form much neater, as shown below.

Left-aligning Text Labels

When we create a column of text labels to the left of the form elements, we’ll have to do a little bit more work than just to position them at the top. Once we begin floating elements, all hell breaks loose!

In order to position the labels next to the form elements, we float the label elements to the left and give them an explicit width :

label float: left;
width: 10em;
margin-right: 1em;
>

We also apply a little bit of margin-right to each label , so that the text of the label can never push right up next to the form element. We must define an explicit width on the floated element so that all the form elements will line up in a neat vertical column. The exact width we apply will depend upon the length of the form labels. If possible, the longest form label should be accommodated without wrapping, but there shouldn’t be such a large gap that the smallest label looks like it’s unconnected to its form element. In the latter scenario, it is okay to have a label width that is smaller than the longest label , because the text will wrap naturally anyway, as you can see below.

Once we float the label , however, we run into a problem with its containing list item — the list item will not expand to match the height of the floated element. This problem is highly visible in the image below, where we’ve applied a background-color to the list item.

One markup-free solution to ensuring a parent contains any of its floated children is to also float the parent, so that’s what we’ll do:

left-aligned-labels.css (excerpt)
fieldset li float: left;
clear: left;
width: 100%;
padding-bottom: 1em;
>

If the list item is floated, it’ll contain all of its floated children, but its width must then be set to 100% , because floated elements try to contract to the smallest width possible. Setting the width of the list item to 100% means that it’ll still behave as if it were an unfloated block element. We also throw a clear :left property declaration in there to make sure that we won’t find any unwanted floating of list items around form elements. clear: left means that the list item will always appear beneath any prior left-floated elements instead of beside them.

However, once we float the list item, we find the same unwanted behavior on the fieldset — it won’t expand to encompass the floated list items. So, we have to float the fieldset . This is the main reason that we removed the padding from fieldset earlier — when we set its width to 100% , any padding will throw out our dimensions:

left-aligned-labels.css (excerpt)
fieldset float: left;
clear: left;
width: 100%;
margin: 0 0 1.5em 0;
padding: 0;
>

Where will this float madness end? Remain calm. It ends right here, with the submit fieldset . Since it’s the last fieldset in the form, and because it doesn’t need as much special CSS styling as the other fieldset s, we can turn off that floating behavior for good:

left-aligned-labels.css (excerpt)
fieldset.submit float: none;
width: auto;
border: 0 none #FFF;
padding-left: 12em;
>

By turning off floating and setting the width back to auto , the final submit fieldset becomes a normal block element that clears all the other floats. This means the form will grow to encompass all the fieldset elements, and we’re back in the normal flow of the document.

None of the elements in the submit fieldset are floated, but we want the button to line up with all of the other form elements. To achieve this outcome, we apply padding to the fieldset itself, and this action pushes the submit button across to line up with all the text fields. It’s best to have the button line up with the form elements, because it forms a direct linear path that the user’s eye can follow when he or she is completing the form.

After all that floating, we now have the layout shown below — a form with a column for the form labels and a column for the form elements.

Right-aligning Text Labels

With all that difficult floating safely out of the way, aligning the input labels to the right is a breeze; simply set the text alignment on the label elements to achieve a form that looks like the image below:

right-aligned-labels.css (excerpt)
label float: left;
width: 10em;
margin-right: 1em;
text-align: right;
>

And we’re done! Now you can take your pick of whichever form layout best fits your pages, all by changing a little CSS!

Which option do you prefer, and why? Let us know in the comments.

Источник

Foundation CSS Forms Label Positioning

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

Forms are the way to take input from the user which is uploaded to the server for processing. The input provided by the user can be of different types, such as password, text, email, etc.

The Label Positioning can be used to position the label with the form inputs. These labels can be put inside the different cells or columns to the inputs. Wrapping the label tag with a div tag, under the influence of a grid, can act as a column. We can also realign the label by specifying the different available classes like .text-right, .text-left, .text-center, .float-left, .float-right etc. This way, we can simply position the label tag using various classes.

Foundation CSS Label Positioning Classes:

• grid-x: This class creates the grid structure in the horizontal direction.
• text-right: It positions the label text to the inner right side of the container.
• text-left: It positions the label text to the inner left side of the container.
• text-center: It positions the label text to the center horizontally.
• float-left: It is used to float the element to the left.
• float-right: It is used to float the element to the right.
• middle: It positions the label text to the center vertically.

Note: The text classes are analogous to the float classes and can be interchanged.

We will explore the various positions of a label & its implementation through the examples.

Example 1: In the below example, we have positioned the label to the left-most corner.

Источник

Как сделать label над input css

Для формированию подписи к текстовому полю ввода input обычно используется тэг label. Рассмотрим вариант в котором подпись поля смещена на границу. Пример на фото:

 class="input-box"> label name  type="text">  

.input-box  /* родительский блок относительно которого будем формировать положение тега label */ position: relative; > input  background: #fff; padding: 10px; /* закруглим края у поля ввода */ border-radius: 11px; width: 200px; > label  position: absolute; /* смещение относительно родительского элемента 10px вверх от верхнего края и 10px влево */ top: -10px; left: 10px; background: #fff; padding: 0 5px; > 

Источник

Как реализовать такое расположение текста над input?

Div для секции с отзывами неправильно выравнивается с Bootstrap. Как решить эту проблему?

Настройка шрифта HTML + CSS?

Почему при публикации проекта на git pages в браузере отображается файл readme?

Почему Джанго не подгружает картинку в CSS и браузер выдает ошибку 404?

Можно ли округлить число в CSS или какой костыль можно придумать?

Почему код для замены текста в кнопке один работает, а второй нет, кто понимает разницу?

Почему bottom:0 не работает?

Как вывести строку с Rust в HTML с помощью Tauri?

В css для header, а он не изменяется. Можете указать на ошибки?

Возможно ли повторить эффект заливки градиентом на стилях?

Минуточку внимания

• Как мне вставить картинку в word файл через python с определенным форматированием?
  • 2 подписчика
  • 0 ответов
  • 3 подписчика
  • 1 ответ
  • 3 подписчика
  • 2 ответа
  • 3 подписчика
  • 2 ответа
  • 2 подписчика
  • 0 ответов
  • 2 подписчика
  • 2 ответа
  • 2 подписчика
  • 3 ответа
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 0 ответов
  • 2 подписчика
  • 1 ответ

  Источник