HTML Course 8.2 Text fields (input type=’text’ and type=’password’)

8.2 Text Fields (input type=’text’ and type=’password’)

1. Общая информация

Поля ввода текста — одни из самых базовых элементов веб-форм. Они позволяют пользователю вводить информацию различного типа: от имен и дат до паролей.

• type=’text’ — однострочное поле для обычного текста.
• type=’password’ — однострочное поле, в котором по умолчанию вводимые символы скрываются.

2. Общие атрибуты

Ниже перечислены ключевые атрибуты, применимые к обоим типам:

• name — имя поля в форме (работает на сервере и в JavaScript).
• id — уникальный идентификатор для связывания с или скриптами.
• value — предустановленное значение.
• placeholder — подсказка, отображаемая, когда поле пустое.
• maxlength — максимальное количество вводимых символов.
• size — визуальная ширина поля в символах (рекомендуется использовать CSS вместо него).
• readonly — делает поле доступным только для чтения.
• disabled — отключает поле (оно не фокусируется и не отправляется).
• required — поле обязательно для заполнения.
• pattern — регулярное выражение для валидации на стороне клиента.
• autocomplete — контроль автозаполнения («on» или «off»).
• autofocus — автоматический фокус при загрузке страницы.
• spellcheck — проверка орфографии (true/false).
• list — связывает поле с

3. Пример: простое текстовое поле

    
    Имя пользователя:
    
  

4. Пример: текстовое поле только для чтения и отключённое

    
    Информационное поле:
    

    
    Отключённое поле:
    
  

5. Пример: валидация с помощью pattern и required

    
    Год рождения:
    
  

6. Пример: datalist для подсказок

    
    Страна:
    
    
  

7. Особенности type=’password’

Поле пароля аналогично текстовому, но скрывает вводимые символы. Основные советы:

• Использовать minlength и maxlength для ограничения длины.
• Добавлять autocomplete='new-password' или 'current-password' в зависимости от контекста.
• Для улучшения UX можно добавить кнопку «показать/скрыть пароль» через JavaScript.

8. Пример: поле пароля с ограничением длины

    Пароль:
    
  

9. Итоги

Поля текста и пароля — гибкие элементы для сбора пользовательского ввода. Комбинируя различные атрибуты, вы можете улучшить валидацию, UX и безопасность без привлечения сложного JavaScript.