Поле для ввода текста в HTML используется для получения текстовой информации от пользователя. В этом уроке мы рассмотрим основные типы текстовых полей, их атрибуты и применение, а также предложим тестовое задание для закрепления материала.
<input type="text">Текстовое поле позволяет пользователю вводить одну строку текста.
<label for="name">Имя:</label>
<input type="text" id="name" name="name">
<textarea>Текстовая область позволяет вводить многострочный текст.
<label for="message">Сообщение:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<input type="password">Поле для ввода пароля скрывает введенные символы.
<label for="password">Пароль:</label>
<input type="password" id="password" name="password">
<input type="email">Поле для ввода email-адреса проверяет правильность введенного адреса.
<label for="email">Email:</label>
<input type="email" id="email" name="email">
name: имя поля, по которому данные будут отправлены на сервер.value: значение поля по умолчанию.placeholder: текст, который отображается внутри поля до ввода данных пользователем.required: указывает, что поле обязательно для заполнения.readonly: делает поле только для чтения.disabled: отключает поле, делая его недоступным для ввода.
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" placeholder="Введите ваше имя" required>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Регистрация</title>
</head>
<body>
<form action="/register" method="POST">
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" placeholder="Введите ваше имя" required><br>
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" placeholder="Введите ваш пароль" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Введите ваш email" required><br>
<label for="bio">О себе:</label>
<textarea id="bio" name="bio" rows="4" cols="50" placeholder="Расскажите о себе"></textarea><br>
<input type="submit" value="Зарегистрироваться">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Обратная связь</title>
</head>
<body>
<form action="/feedback" method="POST">
<label for="name">Имя:</label>
<input type="text" id="name" name="name" placeholder="Ваше имя" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Ваш email" required><br>
<label for="message">Сообщение:</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Ваше сообщение"></textarea><br>
<input type="submit" value="Отправить">
</form>
</body>
</html>
nameБез атрибута name данные поля не будут отправлены на сервер.
<!-- Неправильно -->
<input type="text" id="username" placeholder="Введите ваше имя">
<!-- Правильно -->
<input type="text" id="username" name="username" placeholder="Введите ваше имя">
required для обязательных полейЕсли поле обязательно для заполнения, добавьте атрибут required.
<!-- Неправильно -->
<input type="text" id="username" name="username" placeholder="Введите ваше имя">
<!-- Правильно -->
<input type="text" id="username" name="username" placeholder="Введите ваше имя" required>
В этом уроке мы рассмотрели основные типы текстовых полей в HTML, их атрибуты и примеры использования. Текстовые поля играют важную роль в интерактивных веб-приложениях, позволяя пользователям вводить и отправлять данные.
Создайте веб-страницу, которая содержит форму с следующими элементами:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Форма для ввода данных</title>
</head>
<body>
<form action="/submit" method="POST">
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" placeholder="Введите ваше имя" required><br>
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" placeholder="Введите ваш пароль" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Введите ваш email" required><br>
<label for="message">Сообщение:</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Ваше сообщение"></textarea><br>
<input type="submit" value="Отправить">
</form>
</body>
</html>
Проверьте свою работу на наличие ошибок и убедитесь, что страница корректно отображается в браузере.
Наша цель и главная задача сделать качественное образование в вашем браузере
Телефон: +375 33 910-08-92
Email: info@codefor.tech
Адрес: г. Барановичи, ул. Пирогова, д. 7
© 2024-2025 Все права защищены. CodeFor.
