Html input checkbox text align

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.

Источник

How to Align a Checkbox and Its Label Consistently Cross-Browsers

The checkbox is one of the HTML forms that is used on every website.

How to align the checkbox and its label? This is a question that developers frequently ask. The problem here is that when aligning them correctly in Safari using the «baseline» value of the vertical-align property, they work, but they will not work in Firefox, and developers usually waste much time on fixing this problem. If you have such difficulty, we will show how to do it step by step.

Create HTML

form> div> label> input type="checkbox" /> Label text label> div> form>

Add CSS

• Set the vertical-align property to “bottom”, which is consistent across browsers.
• Set the position property to “relative” to place the element relative to its normal position.

label < display: block; padding-left: 15px; text-indent: -15px; > input < width: 15px; height: 15px; padding: 0; margin: 0; vertical-align: bottom; position: relative; top: -1px; >

Now, let’s see the result of our code.

Example of aligning a checkbox and its label:

html> html> head> title>Title of the document title> style> label < display: block; padding-left: 15px; text-indent: -15px; > input < width: 15px; height: 15px; padding: 0; margin: 0; vertical-align: bottom; position: relative; top: -1px; > style> head> body> form> div> label> input type="checkbox" /> Label text label> div> form> body> html>

Result

In this example, we don’t need a for attribute as we wrap the in a tag.

You can adjust the relative positioning, height, width, and so on depending on the needed text sizing.

Next, we’ll show an example where we use the for attribute.

Example of aligning a checkbox and its labels using a for attribute:

html> html> head> title>Title of the document title> style> input[type=checkbox], input[type=radio] < vertical-align: middle; position: relative; bottom: 1px; > input[type=radio] < bottom: 2px; > style> head> body> form> label> input type="checkbox" /> Label text label> br/> br/> input type="checkbox" id="myChk" /> label for="myChk">label tag with the for attribute label> form> body> html>

Example of aligning a checkbox and its labels by using the display property with the «flex» value:

html> html> head> title>Title of the document title> style> label < display: flex; align-items: center; > style> head> body> form> div> label> input type="checkbox" /> Label text label> div> form> body> html>

Источник

Выровнять чекбокс и текст

Есть форма обратной связи. В ней чекбокс и фраза «Я добровольно отправляю свои данные».
Как их выставить в одну строку?
Чекбокс должен быть в , а фраза в — требования SEOшников.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

 html lang="ru"> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> link rel="stylesheet" type="text/css" href="style/style-svjazi.css"> /head> body> div class="layout3"> div class="content"> div>Описание формы:/div> div class="containerr"> h2>Форма обратной связи/h2> form id="contactForm" action="handler.php" method="post"> div class="field-block"> label for="name">Ваше имя:/label> input id="name" class="field" name="name" required type="text" placeholder="Иванов Иван Иванович"> /div> div class="field-block"> label for="email">Ваш E-mail:/label> input id="email" class="field" name="email" required type="email" placeholder="ivanov@email.com"> /div> div class="field-block"> label for="message">Текст сообщения:/label> textarea id="message" class="field" required name="message" rows="4">/textarea> /div> div class="field-block"> input id="check" name="check" checked type="checkbox"> label for="check">Я добровольно отправляю свои данные/label> /div> button id="button" class="buttonn" type="submit">Отправить/button> div class="result"> span id="answer">/span> span id="loader">img src="images/loader.gif" alt="">/span> /div> /form> /div> /div> /div>  include('footer.php'); ?> /body> /html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

* { /*обнуляем все отступы*/ margin: 0; padding: 0; box-sizing: border-box; } .field-block label { margin-bottom: 10px; text-align: left; } .buttonn { height:70px; width:70%; color: #fff; text-transform: uppercase; letter-spacing: 2px; background-color: #061634; font-size: 16px; border-radius: 2px; display: inline-block; border-width: 2px; border-color: #061634; border-style: solid; } .buttonn:hover { color: #061634; background-color: #fff; } #loader { display: none; } .check-text { font-size: 14px; vertical-align: top; } .field-block textarea { resize: vertical; } .field-block .field:focus { border-color: #66afe9; outline: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); } .field-block .field { font-size: 16px; padding: 8px 12px; line-height: 1.5; border-radius: 2px; border: 1px solid #ccc; box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .field-block label, .field-block .field { display: block; width: 100%; } h2, .field-block { margin-bottom: 20px; } .containerr { max-width: 500px; margin: 15px auto; padding: 10px; border-radius: 1px; background-color: #ebebeb; box-shadow: 0 0 3px #666; font-size: 18px; }

Источник

Как поставить checkbox рядом с текстом input?

Я хочу сделать так чтоб checkbox был слева от текста input когда я пытаюсь это сделать то у меня checkbox выше самого текста, как это исправить?
Я пытался применить align-self: flex-start; но не роботает!

      Я принимаю условия конфиденциальности

.form_label span < font-size: 15px; >.checkbox_input < >[type="checkbox"]:not(:checked), [type="checkbox"]:checked < position: absolute; left: -9999px; >[type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label < position: relative; padding-left: 25px; cursor: pointer; >/* checkbox aspect */ [type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before < content: ''; position: absolute; left:0; top: 2px; width: 16px; height: 16px; border: 1px solid #aaa; border-radius: 3px; >/* checked mark aspect */ [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after < content: '✔'; position: absolute; top: 3px; left: 4px; font-size: 18px; line-height: 0.8; color: #989898; transition: all .2s; >[type="checkbox"]:not(:checked) + label:after

Простой 1 комментарий

Конечно, не работает.
Где родительский флекс-то?

И заодно:
1. Зачем два псевдоэлемента, чтобы поставить одну галочку в рамочку?
2. Зачем попадать куда-то абсолютом (вы еще и два раза это делаете), помнить о том, какой ширины псевдо и делать аналогичный отступ, если есть гриды?
3. Чисто за компанию https://web-standards.ru/articles/vertical-align/

Во-первых, никакой flex не работает на элементах с position: absolute — с точки зрения остальных объектов на странице таких элементов не существует, они исключаются из сетки.
Во-вторых, чтобы ваш checkbox находился слева от текста — заметьте, от текста label, а не input[type=checkbox]! — их нужно обернуть в единый блок. Тогда не придется загоняться на position: absolute, он и так встанет слева, если у этого единого блока будет свойство display: flex, или display:block, а у input будет float: left.
В-третьих, зачем создавать два псевдоэлемента before и after, да к тому же с одинаковыми значениями при отмеченном checkbox и неотмеченном. Да еще и вешать opacity. Прямо скажем, криво.
А теперь немного кода:

 
   
  Я принимаю условия конфиденциальности  
 

.form_label span < font-size: 15px; position: relative; /*придаем блоку свойство для создания возможности позиционирования в блоке*/ >.checkbox_input < position: absolute; left: -999999px; /*прячем чекбокс за пределы видимости*/ >label < text-decoration: underline; color: red; cursor: pointer; /*чтобы все поняли, что сюда нужно нажимать*/ >.checked < /*квадратик для галочки*/ width: 16px; height: 16px; border: 1px solid #aaa; border-radius: 3px; >[type="checkbox"]:checked .checked < /*появление галочки при нажатии на label*/ content: '✔'; display: block; font-size: 18px; line-height: 0.8; color: #989898; transition: all .2s; >/* и собственно выравнивание */ .my-checkbox

Источник