Многострочное поле ввода в HTML
Если вы внимательно читали предыдущие уроки, то теперь умеете создавать самые простые формы, в которых присутствуют поля для ввода текста и кнопки. Теперь же мы перейдем к изучению более сложных компонентов форм.
Речь пойдет о многострочном текстовом поле. И для его создания используется тег <textarea>. Данному тегу присущи такие атрибуты, как name и id. Они аналогичны атрибутам текстового поля.
С помощью атрибута rows, задав ему целочисленное значение, можно указать высоту многострочного поля, измеряемую в строках.
С помощью атрибута cols можно указать ширину поля, которая измеряется в символах. Шириной символа принято считать определенное значение, называемое «усредненной шириной».
Многострочное поле не имеет атрибута value. Чтобы задать значение по умолчанию, следует действовать иначе. А именно, расположить текст внутри тега <textarea>. Именно он и будет представлять собой значение по умолчанию.
На примере это выглядит вот так:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Форма поиска в Яндексе</title>
</head>
<body>
<form method="post" action="/im/">
<label for="nameField">Имя</label><br>
<input type="text" size="30" name="name">
<br>
<label for="messageField">Сообщение</label><br>
<textarea name="message" cols="50" rows="10">Введите здесь своё сообщение...</textarea>
<br>
<input type="submit" value="Отправить сообщение">
</form>
</body>
</html> Результат в браузере:
HTML5 | Текстовые поля
Текстовые поля
Последнее обновление: 08.04.2016
Однострочное текстовое поле создается с помощью элемента input, когда его атрибут type имеет значение text:
<input type="text" name="login" />
С помощью ряда дополнительных атрибутов можно настроить текстовое поле:
dirname: устанавливает направление текста
maxlength: максимально допустимое количество символов в текстовом поле
pattern: определяет шаблон, которому должен соответствовать вводимый текст
placeholder: устанавливает текст, который по умолчанию отображается в текстовом поле
readonly: делает текстовом поле доступным только для чтения
required: указывает, что текстовое поле обязательно должно иметь значение
size: устанавливает ширину текстового поля в видимых символах
value: устанавливает значение по умолчанию в текстовом поле
Применим некоторые атрибуты:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Текстовые поля в HTML5</title> </head> <body> <form> <p><input type="text" name="userName" placeholder="Введите имя" size="18" /></p> <p><input type="text" name="userPhone" placeholder="Введите номер телефона" size="18" maxlength="11" /></p> <p> <button type="submit">Отправить</button> <button type="reset">Отмена</button> </p> </form> </body> </html>
В этом примере во втором текстовом поле сразу устанавливаются атрибуты maxlength и size. При этом size — то есть количество
символов, которые помещаются в видимое пространство поля больше, чем допустимое количество символов. Однако все равно ввести символов больше, чем
maxlength, мы не сможем.
В данном случае также важно различать атрибуты value и placeholder
placeholder устанавливает своего рода подсказку или приглашение к вводу, поэтому он обычно отмечается серым цветом. В то время как
значение value представляет введенный в поле текст по умолчанию:<p><input type="text" name="userName" value="Том" /></p> <p><input type="text" name="userPhone" placeholder="Номер телефона" /></p>
Атрибуты readonly и disabled делают текстовое поле недоступным, однако сопровождаются разным визуальным эффектом. В случае с
disabled текстовое поле затеняется:
<p><input type="text" name="userName" value="Том" readonly /></p> <p><input type="text" name="userPhone" value="+12345678901" disabled /></p>
Среди атрибутов текстового поля также следует отметить такой атрибут как list. Он содержит ссылку на элемент datalist, который определяет набор значений, появляющихся в виде подсказки при вводе в текстовое поле. Например:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Текстовые поля в HTML5</title> </head> <body> <form> <p><input list="phonesList" type="text" name="model" placeholder="Введите модель" /></p> <p> <button type="submit">Отправить</button> </p> </form> <datalist> <option value="iPhone 6S" label="54000"/> <option value="Lumia 950">35000</option> <option value="Nexus 5X"/> </datalist> </body> </html>
Атрибут list текстового поля указывает на id элемента datalist. Сам элемент datalist с помощью вложенных элементов option
определяет элементы списка. И при вводе в текстовое поле этот список отображается в виде подсказки.
Поле поиска
Для создания полей поиска предназначен элемент input с атрибутом type="search". Формально он представляет собой простое текстовое поле:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Поиск в HTML5</title> </head> <body> <form> <input type="search" name="term" /> <input type="submit" value="Поиск" /> </form> </body> </html>
Поле ввода пароля
Для ввода пароля используется элемент input с атрибутом type="password". Его отличительной чертой является то, что вводимые символы маскируются точками:
<form> <p><input type="text" name="login" /></p> <p><input type="password" name="password" /></p> <input type="submit" value="Авторизация" /> </form>
Пособие по HTML-формам: Другие элементы ввода
В первой части пособия по формам HTML мы рассмотрели, как создается простейшая форма с использованием текстовых полей. В этой части мы расскажем о других элементах ввода.
Если нужно реализовать функцию выбора из нескольких значений, используйте элемент ввода чек-бокс:
<input type="checkbox" name="Agree" value="yes" />
Имя, которое используется для идентификации элемента ввода на стороне сервера.
Это значение возвращается на сервер, если пользователь устанавливает флажок в чек-боксе. Необязательный атрибут.
Например, если вы создадите чек-бокс следующим образом:
<input type="checkbox" name="sendmail" />
и если пользователь устанавливает флажок, скрипт на стороне сервера получит следующее: sendmail=’on’
Если чек-бокс выглядит следующим образом:
<input type="checkbox" name="sendmail" value="send" />
и если пользователь устанавливает в нем флажок, скрипт-обработчик получит: sendmail=’send’
checked=’checked’
При наличии атрибута checked по умолчанию флажок в чек-боксе будет установлен.
Пример:
<input type="checkbox" name="sendmail" value="send" checked="checked" />
Переключатель (или радио-кнопка) предназначен для выбора одного элемента из нескольких вариантов в HTML форме. Используйте переключатели, когда выбор доступных вариантов не слишком велик (менее 10).
Переключатель создается с помощью значения ‘radio’ атрибута type.
Пример:
<iput type="radio" name="gender" value="male" />
Переключатели из одной группы должны иметь одинаковые имена.
Пример:
Как вы оцениваете контент этого сайта? <p> <input type="radio" name="rating" value="excellent">Прекрасно !!! <br/> <input type="radio" name="rating" value="good">Хорошо <br/> <input type="radio" name="rating" value="bad">Плохо <br/> </p>
Если пользователь выбирает «Прекрасно!!!«, скрипт на стороне сервера получит: rating=’excellent’.
Можно добавить атрибут checked, чтобы какой-либо вариант был выбранным по умолчанию.
Если вы хотите реализовать для пользователя группу элементов, из которых он может выбирать, создайте выпадающий список. В отличие от других элементов ввода, которые мы рассматривали до этого, список имеет два HTML-тега: <select> и <option>.
Список создается с помощью тега , а элементы в списке задаются тегом .
Из приведенного ниже примера все станет понятно:
Способ доставки: <select name="shipping"> <option value="1"> стандартный</option> <option value="2"> 2 дня</option> <option value="3"> на следующий день</option> </select>
Если пользователь выбирает «2 дня«, скрипт на стороне сервера получит: shipping=2.
Если вы хотите при создании формы в HTML задать выбранный по умолчанию элемент, то можете добавить в тег <option> атрибут selected.
Код:
<option value="1" selected='selected'>Стандартная</option>
сделает стандартный метод доставки выбранным по умолчанию.
Можно разрешить множественный выбор из списка. Для этого в теге <select> используется атрибут ‘multiple’.
Чтобы указать количество видимых (без прокрутки) элементов в списке используйте атрибут size.
Пример:
Выберите сферу своих интересов:
(нажмите, удерживая клавишу ctrl, чтобы выбрать несколько)<br /> <select multiple name="interests" size="4"> <option value="arts">Искусство</option> <option value="pol" >Политика</option> <option value="sci" >Наука</option> <option value="comp">Компьютеры и интернет</option> </select>
Если в форму включен приведенный выше код, пользователь может выбрать любую комбинацию вариантов. Предположим, что пользователь выбирает «Искусство» и «Наука«. Скрипт на стороне сервера получит: «interests=arts» «interests=sci«.
Для ввода большого по объему текста следует использовать текстовую область. Она создается с помощью тега <textarea>
Атрибуты:
name=”descr”
name используется для идентификации области в скрипте на стороне сервера.
cols=”columns”
Определяет ширину текстовой области — количество символов в строке, которое может поместиться без прокрутки.
rows=”rows”
Устанавливает количество строк текстовой области, которое может поместиться без прокрутки.
Пример:
Введите свои пожелания:
<textarea name="suggestions" rows="5" cols="25"></textarea>
Если нужно вывести в текстовой области какое-нибудь значение по умолчанию, вы можете сделать это следующим образом:
<textarea name="suggestions" rows="5" cols="25">мои пожелания:</textarea>
Давайте добавим в нашу форму регистрации HTML чек-бокс, переключатель, выпадающий список и текстовую область из нескольких строк:
<form method='post' action='' >
<p>
Имя: <input type='text' name='Name' />
</p>
<p>
E-mail: <input type='text' name='Email' />
</p>
<p>
<input type="checkbox" name="subscribe" checked />Подписаться на новостную рассылку
</p>
<p>
Форма E-mail:
<p>
<input type="radio" name="format" value="html" checked='checked' />HTML
</p>
<p>
<input type="radio" name="format" value="text" />Простой текст
</p>
</p>
<p>
Выберите, на что вы хотите подписаться:
<p>
<select name="type">
<option value="standard">Стартный план - бесплатно</option>
<option value="prof">Профессиональный план - платно</option>
</select>
</p>
</p>
<p>
Комментарии для редактора:<br/>
<textarea name="comments" rows="7" cols="30"></textarea>
</p>
<p>
<input type='submit' name='Submit' value='Submit' />
</p>
</form>Мы уже рассмотрели несколько элементов ввода данных. Прежде чем изучить более сложные элементы, посмотрите в действии форму, которую мы разработали.
Данная публикация представляет собой перевод статьи «HTML Form Tutorial Part II: More Input Elements» , подготовленной дружной командой проекта Интернет-технологии.ру
HTML Тип ввода
В этой главе описаны различные типы ввода данных элемента <input>.
Тип ввода Текст
<input type=»text»> определяет однострочное поле ввода текста:
Пример
<form>
Имя:<br>
<input type=»text» name=»firstname»><br>
Фамилия:<br>
<input type=»text» name=»lastname»>
</form>
Вот как код HTML будет отображаться в браузере:
Имя:Фамилия:
Тип ввода Пароль
<input type=»password»> определяет поле ввода пароля:
Пример
<form>
Имя пользователя:<br>
<input type=»text» name=»username»><br>
Пароль пользователя:<br>
<input type=»password» name=»psw»>
</form>
Вот как код HTML будет отображаться в браузере:
Имя пользователя:Пароль пользователя:
Символы в поле ввода пароля маскируются (отображаются звездочками или кругами).
Тип ввода Отправить
<input type=»submit»> определяет кнопку для представления данных формы обработчика формы.
Обработчик формы обычно представляет собой серверную страницу со сценарием обработки входных данных.
Обработчик формы указывается в форме с помощью атрибута action:
Пример
<form action=»/action_page.php»>
Имя:<br>
<input type=»text» name=»firstname» value=»Микки»><br>
Фамилия:<br>
<input type=»text» name=»lastname» value=»Маус»><br><br>
<input type=»submit»>
</form>
Вот как код HTML будет отображаться в браузере:
Если нажмете на кнопку value=»Отправить», получите текст по умолчанию:
Пример
<form action=»/action_page.php»>
Имя:<br>
<input type=»text» name=»firstname» value=»Микки»><br>
Фамилия:<br>
<input type=»text» name=»lastname» value=»Маус»><br><br>
<input type=»submit» value=»Отправить»>
</form>
Тип ввода Сброс
<input type=»reset»> определяет кнопку сброса, которая сбросит все значения формы, к значениям по умолчанию:
Пример
<form action=»/action_page.php»>
Имя:<br>
<input type=»text» name=»firstname» value=»Микки»><br>
Фамилия:<br>
<input type=»text» name=»lastname» value=»Маус»><br><br>
<input type=»submit» value=»Отправить»>
<input type=»reset»>
</form>
Вот как код HTML будет отображаться в браузере:
Если Вы измените входные значения и затем нажмите кнопку «Сбросить», то данные формы будут сброшены и назначены по умолчанию.
Тип ввода Радиокнопки
<input type=»radio»> определяет радиокнопки.
Радиокнопки позволяют пользователю выбирать только одно из ограниченного числа вариантов:
Пример
<form>
<input type=»radio» name=»gender» value=»мужчина» checked> Мужчина<br>
<input type=»radio» name=»gender» value=»женщина»> Женщина<br>
<input type=»radio» name=»gender» value=»другие»> Другие
</form>
Вот как код HTML будет отображаться в браузере:
МужчинаЖенщина
Другие
Тип ввода Флажки
<input type=»checkbox»> определяет флажки.
Флажки позволяют пользователю выбрать ни одного или несколько вариантов в ограниченном количестве.
Пример
<form>
<input type=»checkbox» name=»vehicle1″ value=»Велосипед»> У меня есть велосипед<br>
<input type=»checkbox» name=»vehicle2″ value=»Автомобиль»> У меня есть автомобиль
</form>
Вот как код HTML будет отображаться в браузере:
У меня есть велосипедУ меня есть автомобиль
Тип ввода Кнопка
<input type=»button»> определяет кнопку:
Вот как код HTML будет отображаться в браузере:
Типы ввода HTML5
Добавлены несколько новых типов ввода HTML5:
- color — цвет
- date — дата
- datetime-local — дата_время-локальная
- email — электронная почта
- month — месяц
- number — число
- range — диапазон
- search — поиск
- tel — телефон
- time — время
- url — url-адрес
- week — неделя
Новые типы входных данных, которые не поддерживаются в старых браузерах, будут вести себя как <input type=»text»>.
Типы ввода Цвет
<input type=»color»> используется для полей ввода, которые содержат цвет.
Выбор цвета может отображаться в поле ввода в зависимости от поддержки браузера.
Типы ввода Дата
<input type=»date»> используется для поля ввода, которые содержат дату.
Выбор даты может отображаться в поле ввода в зависимости от поддержки браузера.
Можно также добавить ограничения к датам:
Тип ввода Дата_время-локальная
<input type=»datetime-local»> указывает поле ввода даты и времени без часового пояса.
Выбор даты_время может отображаться в поле ввода в зависимости от поддержки браузера.
Тип ввода Электронная почта
<input type=»email»> используется для полей ввода адреса электронной почты.
Адрес электронной почты может быть автоматически проверена при отправке в зависимости от поддержки браузера.
Некоторые смартфоны распознают тип электронной почты и добавляют к клавиатуре «.com» для того чтобы соответствовать входному сигналу электронной почты.
Тип ввода Месяц
<input type=»month»> позволяет пользователю выбрать месяц и год.
Выбор даты может отображаться в поле ввода в зависимости от поддержки браузера.
Тип ввода Число
<input type=»number»> определяет числовое поле ввода.
Вы также можете установить ограничения на то, какие номера применить.
В следующем примере отображается числовое поле ввода, где можно ввести значение от 1 до 5:
Ограничения ввода
Ниже приведен список некоторых распространенных ограничений ввода (некоторые атрибуты являются новыми в HTML5):
| Атрибуты | Описание |
|---|---|
| disabled | Указывает, что поле ввода должно быть отключено |
| max | Задает максимальное значение для поля ввода |
| maxlength | Указывает максимальное число символов для поля ввода |
| min | Задает минимальное значение для поля ввода |
| pattern | Задает регулярное выражение для проверки входных значений |
| readonly | Указывает, что поле ввода доступно только для чтения (изменение невозможно) |
| required | Указывает, что поле ввода (должны быть заполнено) |
| size | Задает ширину (в символах) поля ввода |
| step | Задает законные числовые интервалы для поля ввода |
| value | Задает значение по умолчанию для поля ввода |
Дополнительные сведения об ограничениях ввода см. в следующей главе.
В следующем примере отображается числовое поле ввода, где можно ввести значение от 0 до 100 с шагом 10. Значение по умолчанию — 30:
Тип ввода Диапазон
<input type=»range»> определяет элемент управления для ввода чисел, которое не имеет точного значения (например, элемент управления ползунком). Диапазон по умолчанию от 0 до 100. Однако можно установить ограничения на числа которые применяются атрибутами min, max и step:
Тип ввода Поиск
<input type=»search»> используется для полей поиска (поле поиска ведет себя как обычное текстовое поле).
Тип ввода Телефон
<input type=»tel»> используется для поля ввода телефонного номера.
Выбор телефона в настоящее время поддерживается только в Safari 8.
Тип ввода Время
<input type=»time»> позволяет пользователю выбрать время (без часового пояса).
Выбор времени проверяется в поле ввода в зависимости от поддержки браузера
Тип ввода Url-адрес
<input type=»url»> используется для полей ввода содержания URL-адреса.
В поле URL-адрес проверяется автоматически при отправке в зависимости от поддержки браузера.
Некоторые смартфоны распознают тип URL-адреса и добавляют к клавиатуре «.com», для соответствия входного URL-адреса.
Тип ввода Неделя
<input type=»week»> позволяет пользователю выбрать день недели и год.
Выбор даты отобразится в поле ввода в зависимости от поддержки браузера.
Проверьте себя с помощью упражнений!
Атрибут Типа ввода HTML
| Тег | Описание |
|---|---|
| <input type=»»> | Указывает тип ввода для отображения на дисплее |
Однострочное текстовое поле | htmlbook.ru
Влад Мержевич
Однострочное текстовое поле предназначено для ввода строки символов с помощью клавиатуры. Синтаксис создания такого поля следующий.
<input атрибуты>Значение атрибута type для тега <input> по умолчанию определено как text, поэтому его можно не указывать явно. Атрибуты текстового поля перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| size | Ширина текстового поля, которая определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. |
| maxlength | Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот атрибут опустить, то можно вводить строку длинее самого поля. |
| name | Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| value | Начальный текст отображаемый в поле. |
Создание текстового поля показано в примере 1.
Пример 1. Текстовое поле
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текстовое поле</title>
</head>
<body>
<form action="handler.php">
<p><strong>Как вас зовут?</strong></p>
<p><input maxlength="25" size="40" value="Вася"></p>
</form>
</body>
</html>В результате получим следующее (рис. 1).
Рис. 1. Вид текстового поля в браузере Chrome
Многострочное текстовое поле | WebReference
Для создания области, в которую можно вводить несколько строк текста, предназначен элемент <textarea>. В отличие от <input> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Поле для многострочного текста незаменимо для добавления комментариев к статьям, написания сообщений форума, вставки и редактирования постов в блоге и во многих других случаях, когда одной строки текста явно недостаточно. Синтаксис создания поля следующий.
<textarea атрибуты>
Текст
</textarea>Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля. Если текста нет, то поле будет изначально пустым.
Допустимые атрибуты перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| cols | Ширина поля в символах. |
| maxlength | Максимальное число символов текста, которое можно ввести. |
| name | Имя поля; предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| rows | Высота поля в строках текста. |
| wrap | Параметры переноса строк. |
Создание поля многострочного текста показано в примере 1.
Ни один из этих атрибутов не является обязательным, поэтому простая форма для отправки текста выглядит так (пример 1).
Пример 1. Текстовое поле
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текстовое поле</title>
</head>
<body>
<form>
<p><b>Введите ваш отзыв:</b></p>
<p><textarea name="comment"></textarea></p>
<p><input type="submit"></p>
</form>
</body>
</html>Результат примера показан на рис. 1.
Рис. 1. Вид текстового поля по умолчанию
При оформлении многострочного поля применяются те же стилевые свойства, что и для однострочного текста. А именно можно изменять ширину (свойство width), высоту (height), границу (border), цвет текста и фона (color и background соответственно) и др. Пример создания текстового поля с разными характеристиками приведен в примере 2.
Пример 2. Оформление текстового поля
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текстовое поле</title>
<style>
textarea {
background: #fce9c0; /* Цвет фона */
border: 2px solid #a9c358; /* Параметры рамки */
padding: 10px; /* Поля */
width: 100%; /* Ширина */
height: 200px; /* Высота */
box-sizing: border-box; /* Алгоритм расчёта ширины */
font-size: 14px; /* Размер шрифта */
}
</style>
</head>
<body>
<form action="handler.php">
<p><b>Введите ваш отзыв:</b></p>
<p><textarea name="comment"></textarea></p>
<p><input type="submit"></p>
</form>
</body>
</html>Результат данного примера показан на рис. 2.
Рис. 2. Изменение вида текстового поля
Все браузеры кроме Internet Explorer поддерживают изменение размера для <textarea>. Достаточно потянуть за правый нижний уголок, который по своему виду отличается от остальных. Вот как выглядит такой уголок в Firefox (рис. 3). Вид в разных браузерах может несколько различаться, но общая схожесть сохраняется.
Рис. 3. Уголок для изменения размера
Если вам не нужно, чтобы пользователь мог менять размеры текстового поля, то добавьте свойство resize со значением none.
textarea {
resize: none;
}Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 28.07.2016
Редакторы: Влад Мержевич
Многострочный текст | htmlbook.ru
Этот элемент формы предназначен для создания области, в которой можно вводить несколько строк текста. В таком текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Поле для многострочного текста незаменимо для добавления комментариев к статьям, написания сообщений форума, вставки и редактирования постов в блоге и во многих других случаях, когда одной строки текста явно недостаточно.
Синтаксис создания поля следующий.
<textarea атрибуты>
Текст
</textarea>Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля. Если текста нет, то поле будет изначально пустым.
Допустимые атрибуты перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| cols | Ширина поля в символах. |
| disabled | Блокирует доступ и изменение элемента. |
| maxlength | Максимальное число символов текста, которое можно ввести. |
| name | Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| readonly | Устанавливает, что поле не может изменяться пользователем. |
| rows | Высота поля в строках текста. |
| wrap | Параметры переноса строк. |
Создание поля многострочного текста показано в примере 6.1.
Ни один из этих атрибутов не является обязательным, поэтому простая форма для отправки текста выглядит так (пример 1).
Пример 1. Текстовое поле
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текстовое поле</title>
</head>
<body>
<form action="handler.php">
<p><b>Введите ваш отзыв:</b></p>
<p><textarea name="comment"></textarea></p>
<p><input type="submit"></p>
</form>
</body>
</html>Результат примера в браузере Chrome показан на рис. 1.
Рис. 1. Вид текстового поля по умолчанию
Дополнительно поле может находиться в двух состояниях — блокированном и только для чтения. Спецификация HTML5 не определяет вид поля и текста в подобных состояниях, поэтому браузеры по-разному его отображают (рис. 2).
| Internet Explorer | Opera |
| Chrome | Firefox |
Текст внутри блокированного поля нельзя выделить и добавить, также содержимое такого поля не отправляется формой на сервер. Текст внутри поля для чтения доступен для копирования, но его нельзя отредактировать. В примере 2 показан способ создания поля для чтения.
Пример 2. Поле для чтения
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Поле для чтения</title>
</head>
<body>
<form action="handler.php">
<p>Скопируйте приведённый текст и вставьте его в
поле запроса пароля.</p>
<p><textarea name="comment" readonly>Мухаха</textarea></p>
</form>
</body>
</html>
Учтите, что поле для чтения по своему виду не отличается от обычного текстового поля, но пользователь не сможет в него ничего добавить. Так что используйте его осмотрительно, чтобы не вводить людей в заблуждение.