Html input textarea: Тег | htmlbook.ru — Вебджем.рф | Создание и продвижение сайтов

Содержание

Кросбраузерные input и textarea — Xiper

Автор: Евгений Рыжков Дата публикации:

Задача

Задать оформление для полей input[type=»text/password»] и textarea максимально одинаковое во всех популярных браузерах.

Теория

По умолчанию разные браузеры по разному отображают текстовые поля форм — различны:

внутренние отступы (padding), сброс отступов через универсальный селектор тут не помогает
шрифт (только для <textarea>) и его размер (хорошо видно в Safari)
горизонтальное выравнивание текста (текст не на одной горизонтальной линии) в полях и рядом стоящих элементах (например, <label>)

поля в FF 3.5

поля в IE 6

поля в Opera 9.6

поля в Safari 3.2

Разница становится заметней, когда привязываем необычное оформление полей.

Решение

Явно задаем для input[type=»text»], input[type=»password»] и textarea размер шрифта (font-size), внутренние отступы (padding). Для textarea так же указываем имя шрифта (font-family).

Заметка: для более предсказуемого поведения полей так же можно задать оформление границ (border), но это подпортит вид полей в некоторых браузерах (например, Opera поле станет прямоугольным, без скруглений углов) — используем при необходимости.


input[type="text"], input[type="password"] {
font-size: 100%;
padding: 0;
}
textarea {
font-size: 100%;
padding: 0;
font-family: arial;
}

Код для IE 6, который не понимает в CSS атрибуты (добавляем в ie6.css и подключаем к странице условными комментариями):


.formText {
font-size: 100%;
padding: 0;
}
input {
z-index: expression(
runtimeStyle.zIndex = 1,
type == "text" ? (className += " formText") : 0,
type == "password" ? (className += " formText") : 0
)
}

Update: Дополнительные проблемы могут возникнуть, если полю нужно указать высоту и/или верхний внутренний отступ (padding-top).

Для примера сделаем поле, которое должно быть высотой 24px, шириной 200px и отступом от верхней границы 3px:


input {
height: 24px;
width: 200px;
border: 1px solid #0000CC;
background: #99CCFF;
font-size: 12px;
padding: 3px 0 0 2px;
}

В итоге видим, что в разных браузерах текст в поле выравнивается по разному плюс размеры самого поля отличается:

FF 3.5	opera 10	ie6

На размерах поля останавливаться не будем — нужно вспомнить просто о блочной модели и том, что ие6 ее не так понимает. А вот чтобы выровнять текст, нужно следующее:

указать высоту поля
явно указать верхний и нижний отступы (padding-top / padding-bottom)

ну и не забыть явно указать размер шрифта (font-size)
задать высоту строки (line-height) равную высоте поля (height) — update by Константин


input {
height: 16px; /* высота с учетом бордюр, внутренних отступов */
width: 196px; /* ширина с учетом бордюр, внутренних отступов */
border: 1px solid #0000CC;
background: #99CCFF;
font-size: 12px;
padding: 3px 0 3px 2px; /* обязательно наличие как верхнего так и нижнего отступа */
font-family: Arial, Helvetica, sans-serif;
line-height: 16px; /* должно быть равно height, пригодится как минимум для ie6  */
}
* html input {
/* 
  update by Nikita Zhukov
  хак нужен только если IE6 работает в режиме обратной совместимости
  (в таком режиме он работает например, если используется xml-декларация)
*/
height: 24px;
width: 200px;
}

Результат.

Проверено в :

IE 6-8
Firefox 2-3
Opera 9.5 — 10
Safari 4

Update так же следует упомянуть, что поля в Safari и Chrome имеют по умолчанию внешние отступы (похоже на резервирование места для подсветки поля в фокусе). Иногда это мешает, например, когда требуется выровнять поля разных типов по одной линии (пример как это должно выглядеть можно увидеть в статье «Убираем отступы у checkbox и radio»). Чтобы было все тип-топ, достаточно обнулить отступы для этих полей.

Textarea | HTML | CodeBasics

Часто мы хотим дать пользователю возможность набрать не одну строчку текста, а сразу несколько. Например, если пользователь хочет оставить отзыв. Для этого используется элемент <textarea>, позволяющий вводить несколько строчек текста.

Оставьте свой отзыв

<form>
  <textarea></textarea>
</form>

Заметьте, что <textarea> является парным тегом.

Это означает, что вы можете вложить в него текст по умолчанию, чтобы пользователь быстрее понял, что ему необходимо ввести.

По умолчанию высота и ширина <textarea> зависит от настроек браузера. Это значит, что в разных браузерах высота и ширина может меняться. Для того, чтобы установить одинаковое значение, используются атрибуты rows и cols, означающие количество строк и столбцов соответственно.

<form>
  <textarea rows="5" cols="30">textarea с 5 строками и 30 столбцами</textarea>
</form>

textarea с 5 строками и 30 столбцами

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people. Внутри формы создайте поле для многострочного ввода. Количество строк для ввода: 4. Количество столбцов: 30

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.

В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

←Предыдущий

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

Более 1 строки в

спросил

10 лет, 3 месяца назад

Изменено 9 месяцев назад

Просмотрено 360 тысяч раз

У меня возникли проблемы с тем, чтобы мой имел более 1 строки,

Я попытался добавить свойства в html, как вы сделали бы с обычным вот так:

Я даже пытался сделать это в CSS, но не получилось. Я искал по всему Интернету решение, но нигде не могу найти тему, касающуюся моей точной проблемы.

Текстовые области, с которыми я столкнулся, находятся на этом веб-сайте: Vilduhelst

Когда вы нажмете кнопку «Lav dit eget dilemma», они появятся.

Я ищу решение для HTML или CSS.

ввод
текстовое поле
строк
строк

Почему бы не использовать тег </code>? </p><pre> <textarea rows="10" cols="70">

5

  Хотя    игнорирует атрибут  rows , вы можете воспользоваться тем, что   </code> не обязательно должно находиться внутри тегов <code> <form> </code>, но все же может быть частью формы, если указать идентификатор формы: </p><pre> <form method="get">
    <тип ввода = "отправить" />
</форма>
<textarea form ="testformid" name="taname" cols="35" wrap="soft">
 Конечно,   </code> теперь отображается под кнопкой «отправить», но, возможно, вы найдете способ переместить его.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/1.bp.blogspot.com/-34y9uAmHFA8/XK6VkxtyyII/AAAAAAAAAG4/3IgFpf7vstkr62ZDVV4p3UGpxkZDoNdJACLcBGAs/w1200-h630-p-k-no-nu/inputt.png' /><noscript><img loading='lazy' src='/800/600/http/1.bp.blogspot.com/-34y9uAmHFA8/XK6VkxtyyII/AAAAAAAAAG4/3IgFpf7vstkr62ZDVV4p3UGpxkZDoNdJACLcBGAs/w1200-h630-p-k-no-nu/inputt.png' /></noscript><div id="yandex_rtb_1" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript">if(rtbW>=960){var rtbBlockID="R-A-744004-3";}
else{var rtbBlockID="R-A-744004-5";}
window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:"yandex_rtb_1",blockId:rtbBlockID,pageNumber:1,onError:(data)=>{var g=document.createElement("ins");g.className="adsbygoogle";g.style.display="inline";if(rtbW>=960){g.style.width="580px";g.style.height="400px";g.setAttribute("data-ad-slot","9935184599");}else{g.style.width="300px";g.style.height="600px";g.setAttribute("data-ad-slot","9935184599");}
g.setAttribute("data-ad-client","ca-pub-1812626643144578");g.setAttribute("data-alternate-ad-url",stroke2);document.getElementById("yandex_rtb_1").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_1");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script> </p> <p data-readability-styled="true">




            1
     </p> <p> Как сказал <em> Sparky </em> в комментариях ко многим ответам на этот вопрос, <strong> НЕТ </strong> какого-либо значения <code> textarea </code> для атрибута <code> type </code> тега <code> input </code>. </p> <p> При других условиях следующая разметка <strong> недействительна </strong> : </p><pre> <input type="textarea" />
 </pre><p> И браузер заменяет его на <strong> по умолчанию </strong> : </p><pre> <input type="text" />
 </pre><p> <strong> Для определения многострочного ввода текста используйте: </strong> </p><pre> <текстовое поле></текстовое поле>
 </pre><p> Дополнительные сведения см. в документации по элементу <em> textarea </em>. </p> <p> Тег input не поддерживает атрибуты rows и cols. Вот почему лучшей альтернативой является использование текстового поля с атрибутами rows и cols. Вы все еще можете добавить атрибут «имя», а также есть полезный атрибут «обертка», который может очень хорошо пригодиться в различных ситуациях.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/media.geeksforgeeks.org/wp-content/uploads/dom-required.png' /><noscript><img loading='lazy' src='/800/600/http/media.geeksforgeeks.org/wp-content/uploads/dom-required.png' /></noscript><center><ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1812626643144578"
     data-ad-slot="3076124593"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center>  </p>
                                
                                    

    


                                  <h4><span class="ez-toc-section" id="i-4"> Зарегистрируйтесь или войдите в систему </span></h4>  <p data-readability-styled="true"> Зарегистрируйтесь с помощью Google
                         </p> <p data-readability-styled="true"> Зарегистрироваться через Facebook
                         </p> <p data-readability-styled="true"> Зарегистрируйтесь, используя адрес электронной почты и пароль
                         </p>  <h4><span class="ez-toc-section" id="i-5"> Опубликовать как гость </span></h4>  <p data-readability-styled="true"> Электронная почта </p> <p> Обязательно, но не отображается </p> <p data-readability-styled="true"/>
                          <h4><span class="ez-toc-section" id="i-6"> Опубликовать как гость </span></h4> 
            
             <p data-readability-styled="true"> Электронная почта </p> <p> Требуется, но не отображается </p>

            

                                    
                                    
                              <h2><span class="ez-toc-section" id="html_angularjs"> html — В чем разница между текстовой областью и текстом типа ввода в angularjs </span></h2>  <p>
                        спросил
                         <time itemprop="dateCreated" datetime="2014-02-11T09:38:28"> 8 лет, 11 месяцев назад </time> </p> <p>
                        Изменено
                        1 год, 5 месяцев назад
 </p> <p>
                        Просмотрено
                        117 тысяч раз
 </p> <p> Только не уверен, в чем разница.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/1.bp.blogspot.com/-Z7jaf5ekJlE/X-JE7_aK47I/AAAAAAAACZ4/DdqW7ZUlx18yW4wDjRLASurDLrcmJyGCwCLcBGAsYHQ/w1200-h630-p-k-no-nu/how-to-center-align-html-table.png' /><noscript><img loading='lazy' src='/800/600/http/1.bp.blogspot.com/-Z7jaf5ekJlE/X-JE7_aK47I/AAAAAAAACZ4/DdqW7ZUlx18yW4wDjRLASurDLrcmJyGCwCLcBGAsYHQ/w1200-h630-p-k-no-nu/how-to-center-align-html-table.png' /></noscript>  Пытаюсь выяснить, что лучше для моего варианта использования. </p> <ul> <li> HTML </li> <li> ввод </li> <li> текстовое поле </li> </ul> <p data-readability-styled="true">




            2
     </p> <p> Разница касается <code> HTML </code> и не связана с <code> AngularJS </code> . Во всяком случае, некоторые определения с сайта W3Schools: </p> <p> <strong> тип ввода текст </strong> : </p> <blockquote>
   <p> Тег <code> <input> </code> определяет поле ввода, в которое пользователь может вводить данные. </p>
  
   <p> <code> <input> </code> элементов используются в <code> <form> </code> элемент для объявления элементов управления вводом, позволяющих пользователям вводить данные. </p>
  
   <p> Поле ввода может различаться по-разному, в зависимости от атрибута типа. </p>
 </blockquote> <p> <strong> Текстовое поле </strong> : </p> <blockquote>
   <p> Тег <code> <textarea> </code> определяет элемент управления многострочным вводом текста. </p>
  
   <p> Текстовая область может содержать неограниченное количество символов, а текст отображается шрифтом фиксированной ширины (обычно Courier).<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fiverr-res.cloudinary.com/images/t_main1,q_auto,f_auto,q_auto,f_auto/gigs/24633852/original/565d1e8e537c6e225cc8e6d99eb9cfc8ac44bf37/create-or-fix-any-php-html-mysql-javascript-application.png' /><noscript><img loading='lazy' src='/800/600/http/fiverr-res.cloudinary.com/images/t_main1,q_auto,f_auto,q_auto,f_auto/gigs/24633852/original/565d1e8e537c6e225cc8e6d99eb9cfc8ac44bf37/create-or-fix-any-php-html-mysql-javascript-application.png' /></noscript>  </p>
  
   <p> Размер текстовой области можно указать с помощью <code> столбцов </code> и <code> строк </code> атрибутов или даже лучше; через свойства CSS <code> height </code> и <code> width </code>. </p>
 </blockquote> <p> Определения и примеры можно найти здесь: область ввода и текста </p> <p data-readability-styled="true">




            1
     </p> <p> Вообще говоря, поле ввода представляет собой однострочное поле (вероятно, чтобы содержать что-то вроде имени или фамилии, номера телефона, электронной почты). Текстовое поле представляет собой многострочное поле, в котором можно нажать клавишу ВВОД! Они используются для адресов или других длинных и сложных типов данных (например, заметок). </p> <p> Возможно, это слишком очевидно, но я просто подумал упомянуть: </p> <p data-readability-styled="true">




            1
     </p> <p> TextArea содержит несколько строк, ввод текста только для одной строки
разница в объявлении следующая: </p><pre> <input name="txtDescEd" type="text" />
<textarea name="txtDescEd" cols="60" rows="10">
 Основное различие между текстовым полем и текстовым полем ( ) заключается в том, что текстовое поле состоит только из одной строки, тогда как текстовое поле обычно состоит из нескольких строк.

Html input textarea: Тег | htmlbook.ru