Текстовое поле в html: Однострочное текстовое поле | htmlbook.ru

Тюнинг резинового текстового поля / Хабр

Думаю, что многим верстальщикам (и не только) приходилось верстать текстовые поля (), задавая им произвольные размеры. Но как сделать данный элемент резиновым и удовлетворить условиям:

1. Возможность установки любых горизонтальных и вертикальных отступов у текста;
2. Элемент должен занимать весь контейнер, в который он помещен;
3. Клик мышью в любое место текстового поля устанавливает в нем курсор.

Ответ достаточно прост и решается следующим методом:

Для начала, надо понять, что происходит с input-элементом при выставлении его ширины в 100% и добавления слева и справа отступов для текста.

Согласно стандартам CSS (а в данном случае их поддерживают все браузеры), результирующая ширина элемента input, при отсутствии границ (

) и

полей (

), будет равна:

width = width + padding-left + padding-right

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

		<div>
			<div>
				<input type="text" value="" />
			<div>
		</div>
		

Каждый контейнер выполняет свою роль:

1. input-width – этот контейнер задает результирующую ширину текстового поля;
2. width-setter – этот контейнер задает ширину input-элемента за вычетом горизонтальных внутренних отступов.

Вот набор стилей, который разъяснит эту конструкцию:

	.input-width {
		height:23px;
		border:1px solid #999;
		background:#fff;
	}
	.width-setter {
		height:23px;
		margin:0 9px;
	}
	.width-setter input {
		width:100%;
		height:14px;
		padding:4px 9px 5px;
		margin:0;
		font-family:Tahoma, Geneva, sans-serif;
		font-size:12px;
		line-height:14px;
		color:#000;
		border:0 none;
		background:#9C6;
	}
		

Из стилей получается, что элемент input-width задает ширину, которую должно было занимать текстовое поле. Элемент width-setter задает ширину input-элемента меньше на горизонтальные внутренние отступы. Стоит заметить, что его внешние отступы поля (margin) должны быть равны padding-left и

	.input-width {
		height:23px;
		border:1px solid #999;
		background:#fff;
	}
	.width-setter {
		height:23px;
		margin:0 9px;
		position:relative;
	}
	.width-setter input {
		width:100%;
		height:14px;
		padding:4px 9px 5px;
		margin:0;
		font-family:Tahoma, Geneva, sans-serif;
		font-size:12px;
		line-height:14px;
		color:#000;
		border:0 none;
		background:#9C6;
		position:absolute;
		left:-9px;
		top:0;
	}

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

Примечание. Приведенный метод реализации резинового текстового поля проверен на Doctype: HTML 4.01, XHTML 1.0 и HTML (HTML 5) — и имеет кроссбраузерность: IE6-8, Opera 9+, FF 2.0+, Safary 2.0+, Chrome. При отсутствии Doctype кроссбраузерная работоспособность метода не гарантирована.

Текстовое поле

Текстовое поле является простейшим текстовым элементом управления, позволяющим пользователю вводить небольшие объемы текста.

Вы можете также связать этот элемент управления с переменной или параметром типа String, double или int. При этом при введении пользователем в поле другого значения оно будет присваиваться связанной с этим текстовым полем переменной/параметру.

В некоторых случаях более удобно изменять значения целочисленных (типа int) переменных или параметров с помощью бегунков. Управлять же значениями логических переменных типа boolean лучше всего с помощью флажков.

Взгляните на эту демонстрационную модель. В этой простой процессной модели показывается, как связать текстовое поле с параметром интенсивности прибытия агентов rate блока библиотеки Source.

Текстовое поле textarea html

Итак, мы продолжаем с элементами формы и, после рассмотренного элемента SELECT, мы рассмотрим очередной элемент для ввода строк текста — это элемент textarea. Этот элемент напоминает собой область несколько склеенных элементов input стоящих один под другим.

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

Если мы просто вставим данный тег в редактор и обновим страницу в браузере то текстовое поле будет выглядеть стандартным образом, т.к. ему небыли заданы ни какие размеры.

Данное текстовое поле должно содержать имя, которое задается с помощью уже известного атрибута со значением name=«text». Так же текстовому полю textarea можно задать размеры, указав ему с помощью атрибутов количество рядов и колонок.

Высота поля, то есть ряды указываются с помощью атрибута rows, например: rows=«10».

Ширина поля, то есть столбцы задаются атрибутом cols, например: cols=«60». В итоге у нас получился следующий вид:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Первая HTML страница</title>
</head>
<body>
	
</body>
</html> 

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

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Первая HTML страница</title>
</head>
<body>
	Текст внутри текстового поля... 
</body>
</html> 

И, рассмотрим еще ситуацию, когда, например, после клика на вопрос перед текстовым полем, нам нужно установить курсор в это текстовое поле. Для этого используем тег <label>, но уже другим методом, через атрибут for и идентификатор для текстовой области id = «» .

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Первая HTML страница</title>
</head>
<body>

Текстовое поле textarea:
Текст внутри текстового поля...


</body>
</html>

То есть, после клика по вопросу перед текстовым полем обработчик событий ищет идентификатор с именем text, так как в теге <label> указан атрибут for с именем text. Таким образом, между собой связываются эти два элемента — параграф и текстовое поле. Таким же способом связываются и надпись у чекбоксов.

И, рассмотрим еще один атрибут, он применяется не только к текстовому полю textarea, но и для простого текстового поля input.

С помощью атрибута readonly, что в переводе с английского «Только для чтения», создается текстовая область только для чтения, т.е. не поддающаяся редактированию. По умолчанию у элемента данный атрибут выключен.

HTML

 Текстовое поля с использованием атрибута «readonly»...

Такого же эффекта не активного окна можно добиться и с помощью атрибута disabled. В этом случае так же блокируется доступ к изменению содержимого в поле, но при этом поле становится серого цвета и не доступно для активирования при клики на него.

HTML

Текстовое поля с использованием атрибута «disabled» ...

Разница между данными атрибутами в том, что при использовании атрибута readonly, при отправке формы, содержимое формы передается обработчику. А при использовании атрибута disabled данные (содержимое формы) не будут передаваться обработчику.

Тем не менее содержимое таких полей все же можно изменить с помощью скриптов.

HTML

Текст внутри текстового поля...

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

HTML

Текст внутри текстового поля...

Вот так создаются текстовые поля для ввода больших текстов, а мы переходим к следующему элементу, где рассмотрим кнопки с помощью которых мы и сможем отправлять обработчику содержимое (данные) любого поля или очищать поля формы.

Форма обратной связи HTML: Текстовое поле.

Приветствую, Друзья.

В прошлом видео мы рассмотрели живые примеры создания карты изображения. Примеров, я думаю, достаточно, их было три. Также мы завершили очередной раздел ВидеоКурса посвящённый изображениям. Теперь мы знаем все об изображениях в HTML.

Пора двигаться дальше и приступать к еще одному большому и не менее интересному разделу это формы в HTML. В этом разделе мы затронем все, что касается форм, начиная от простых форм, состоящих из текстовых полей и заканчивая отправкой и обработкой данных.

Первый видео урок этого раздела посвящен созданию формы и добавлению текстового поля для получения данных. В этом видео мы изучим три HTML-тега, с которыми еще не знакомились. Это <form>, <input> и <label>.

HTML-тег form.

Тег <form> существует для создания блока или контейнера формы, в который мы сможем помещать различные элементы, начиная с текстовых полей и заканчивая различными списками и флажками. Тег <form> имеет обязательный HTML-атрибут action с помощью которого мы можем указать путь к файлу, который будет обрабатывать данные из формы. Кроме того, тег <form> имеет огромное количество различных атрибутов, о которых мы подробно поговорим в видео уроке.

HTML-тег input.

Тег <input> существует для добавления различных элементов в контейнер формы. Элементы могут самые различные это и текстовые поля, и кнопки, и переключатели, и т.д. Тег <input> не менее важен тега <form> и служит для непосредственного вывода различных полей на странице. У него существует довольно внушительный список атрибутов, которые мы можем использовать. И, пожалуй, самый интересный, это атрибут type, который позволит нам определить, что за элемент необходимо вывести на страницу. В этом видео мы рассмотрим вывод текстового поля, с помощью тега <input>.

Мы выведем на страницу с помощью тега <input> текстовое поле. Обычное текстовое поле, в которое пользователь сможет вносить какие-то свои данные, такие как имя, фамилия и много всего прочего. Кроме этого мы проделаем некоторые манипуляции с текстовым полем. Узнаем, как менять его ширину? Как сделать ограничение по количеству символов введенных в текстовое поле? Как вообще сделать поле неактивным и т.д.

HTML-тег label.

Тег <label> служит для установки связи между меткой, например текста, и элементом формы, в нашем случае это <input>. Для чего это нужно и как работает, мы сможем увидеть в видео уроке. Следует отметить, что тег <label> имеет всего пару атрибутов, которые мы можем использовать в отличие от тегов, о которых я написал чуть выше.

Все эти теги имеют тесную связь друг с другом особенно первые два. И именно с помощью этих тегов мы можем создавать формы обратной связи HTML.

В этом видео мы начнем создавать форму и изучать различные элементы. А после завершения раздела Вы сможете легко создавать форму связи HTML у себя на сайте, достаточно будет только выбрать элементы, которые необходимы именно Вам. Также стоит отметить, что это не обязательно должна быть форма связи, это может быть и форма комментариев, или регистрации, или, например заказа услуг, или чего-то еще. Не важно, какая должна быть форма, и какова ее цель. У всех форм общая задача это получение каких-либо данных с помощью элементов интерфейса, таких как <input>.

Видео урок: Форма обратной связи HTML: Текстовое поле.

HTML-справочник и другие материалы можно и нужно скачать здесь!

В следующем видео мы продолжим изучение форм в HTML. И подробно рассмотрим возможности тега <input>, с помощью атрибута type.

Веб-формы:Имена HTML полей веб-форм

Вопросы веб-формы

При выводе веб-формы все ответы на вопросы представляются в виде HTML полей, заполняя которые, пользователи отвечают на тот или иной вопрос. Ниже представлена таблица зависимости имен HTML-полей от типов ответов.

Принятые обозначения

Поля веб-формы

Помимо ответов на вопросы веб-формы, необходимо выводить и редактировать значения полей веб-формы. Ниже представлена таблица зависимости имен HTML полей от типов поля веб-формы.

Принятые обозначения

• field_id — ID поля веб-формы.

Смотрите также

© «Битрикс», 2001-2022, «1С-Битрикс», 2022

Наверх

Устанавливаем значение элемента input по умолчанию. Атрибут HTML placeholder.

При работе с формами HTML, а особенно с текстовыми полями, которые создаются с помощью элемента input с атрибутом type=»text», можно столкнуться с проблемой.

Для этих текстовых полей нужно задать текстовое пояснение, которое будет отображаться в текстовом поле до того времени, пока пользователь не введет туда какую-либо информацию.

Выглядит это вот так:

В верхнем текстовом поле пользователь ввел информацию, а в поле ниже пользователь не вводил ничего.

Такие текстовые пояснения помогают пользователю сориентироваться, какую информацию он должен ввести и при этом экономится пространство страницы за счет того, что отпадает необходимость делать текстовое пояснение рядом с текстовым полем. Например, вот так:

С англ. языка placeholder переводится как заполнитель.

Логика работы здесь следующая:

Добавив этот атрибут к текстовому полю или textarea, на заднем фоне появляется фоновое текстовое содержимое, которое исчезает при перемещении фокуса на элемент. Если убрать фокус с элемента, но ничего не ввести в текстовое поле, то «заполнитель» снова появится. «Заполнитель» исчезнет только тогда, когда в текстовом поле будет какое-либо содержимое.

Вот, как это все можно использовать на практике:

<input type="text" placeholder="Текстовая строка">

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

Добавим placeholder для элемента textarea.

<textarea placeholder=" Текстовая строка ">
</textarea>

Стоит отметить, что атрибут placeholder не будет работать на старых браузерах. Но, доля этих браузеров в каждым днем становиться все меньше и меньше.

Чтобы понять, как это все работает, посмотрите на следующий живой пример:

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

— HTML: язык гипертекстовой разметки

элементов типа text создают базовые однострочные текстовые поля.

Атрибут value представляет собой DOMString , который содержит текущее значение текста, введенного в текстовое поле. Вы можете получить это, используя свойство HTMLInputElement value в JavaScript.

  пусть theText = myTextInput.value;
  

Если для ввода не установлены ограничения проверки (дополнительные сведения см. в разделе Проверка), значение может быть пустой строкой ( "" ).

В дополнение к атрибутам, которые работают со всеми элементами независимо от их типа, ввод текста поддерживает следующие атрибуты.

Значения атрибута list — это id элемента , расположенного в том же документе. предоставляет список предопределенных значений, которые можно предложить пользователю для этого ввода. Любые значения в списке, несовместимые с типом , не включаются в предлагаемые варианты.Предоставленные значения являются рекомендациями, а не требованиями: пользователи могут выбрать из этого предопределенного списка или указать другое значение.

Максимальное количество символов (в единицах кода UTF-16), которое пользователь может ввести в текст ввода . Это должно быть целочисленное значение от 0 или выше. Если maxlength не указано или указано недопустимое значение, ввод text не имеет максимальной длины. Это значение также должно быть больше или равно значению minlength .

Ввод не пройдет проверку ограничения, если длина текстового значения поля превышает maxlength единиц кода UTF-16. Проверка ограничения применяется только тогда, когда значение изменяется пользователем.

Минимальное количество символов (в единицах кода UTF-16), которое пользователь может ввести в текст ввода . Это должно быть неотрицательное целое число, меньшее или равное значению, указанному параметром maxlength .Если minlength не указано или указано недопустимое значение, ввод text не имеет минимальной длины.

Ввод не пройдет проверку ограничения, если длина текста, введенного в поле, меньше minlength кодовых единиц UTF-16. Проверка ограничения применяется только тогда, когда значение изменяется пользователем.

Атрибут шаблон , если он указан, является регулярным выражением, которому входное значение должно соответствовать, чтобы значение прошло проверку ограничения.Это должно быть допустимое регулярное выражение JavaScript, используемое типом RegExp , и как описано в нашем руководстве по регулярным выражениям; флаг 'u' указывается при компиляции регулярного выражения, чтобы шаблон обрабатывался как последовательность кодовых точек Unicode, а не как ASCII. Вокруг текста шаблона не должно указываться косая черта.

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

Примечание: Используйте атрибут title , чтобы указать текст, который большинство браузеров будет отображать в качестве всплывающей подсказки, чтобы объяснить, какие требования должны соответствовать шаблону. Вы также должны включить другой пояснительный текст рядом.

Дополнительные сведения и пример см. в разделе «Указание шаблона».

Атрибут заполнитель представляет собой строку, которая дает пользователю краткую подсказку о том, какая информация ожидается в поле.Это должно быть слово или короткая фраза, демонстрирующая ожидаемый тип данных, а не поясняющее сообщение. Текст не должен включать возврат каретки или перевод строки.

  <форма>
  <дел>
    Выберите имя пользователя: 
    <тип ввода="текст" имя="имя">