6.1 Атрибут required
Валидация данных в формах является важным аспектом веб-разработки, который помогает обеспечить правильность и целостность вводимой информации. HTML предоставляет множество встроенных атрибутов для проверки ввода данных, таких как required, pattern, min, max, а также атрибуты placeholder и value, которые улучшают взаимодействие пользователя с формой.
Атрибут required указывает, что поле ввода обязательно для заполнения. Браузер не позволит отправить форму, если поле, отмеченное как required, не заполнено.
Синтаксис
<input type="text" name="username" required>
Пример использования
<form action="/" method="post">
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" required>
<button type="submit">Отправить</button>
</form>
Объяснение
Если атрибут required указан, пользователь должен заполнить поле перед отправкой формы. Если поле пустое, браузер покажет сообщение об ошибке и не отправит форму.
6.2 Атрибут pattern
Атрибут pattern позволяет задать регулярное выражение для проверки ввода данных. Если введенные данные не соответствуют указанному шаблону, браузер покажет сообщение об ошибке и не отправит форму.
Синтаксис
<input type="text" name="username" pattern="[A-Za-z]{3,}">
Пример использования
Атрибут pattern задает регулярное выражение, которому должны соответствовать введенные данные. В данном примере имя пользователя должно содержать только буквы и быть не короче трех символов.
<form action="/" method="post">
<label for="username">Имя пользователя (только буквы, минимум 3 символа):</label>
<input type="text" id="username" name="username" pattern="[A-Za-z]{3,}" required>
<button type="submit">Отправить</button>
</form>
6.3 Атрибуты min и max
Атрибуты min и max используются для задания минимальных и максимальных допустимых значений для числовых и датированных полей.
Синтаксис
<input type="number" name="age" min="18" max="99">
Пример использования
Числовое поле
min: устанавливает минимально допустимое значение. В данном примере минимальный возраст — 18 летmax: устанавливает максимально допустимое значение. В данном примере максимальный возраст — 99 лет
<form action="/" method="post">
<label for="birthday">Дата рождения (с 1900-01-01 до 2024-12-31):</label>
<input type="date" id="birthday" name="birthday" min="1900-01-01" max="2024-12-31" required>
<button type="submit">Отправить</button>
</form>
6.4 Атрибут placeholder
Атрибут placeholder задает текст-заполнитель, который отображается внутри поля ввода, пока пользователь не начнет вводить данные. Этот атрибут помогает пользователям понять, какие данные ожидаются в данном поле.
Синтаксис
<input type="text" name="username" placeholder="Введите имя пользователя">
Пример использования
Атрибут placeholder отображает текст внутри поля ввода до тех пор, пока пользователь не начнет вводить данные. В данном примере текст-заполнитель — "Введите имя пользователя".
<form action="/" method="post">
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" placeholder="Введите имя пользователя" required>
<button type="submit">Отправить</button>
</form>
6.5 Атрибут value
Атрибут value задает начальное значение для элемента ввода. Это значение будет отображено в поле при загрузке страницы или сбросе формы.
Синтаксис
<input type="text" name="username" value="default user">
Пример использования
Атрибут value устанавливает начальное значение поля ввода. В данном примере имя пользователя по умолчанию — "default user".
<form action="/" method="post">
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" value="default user" required>
<button type="submit">Отправить</button>
</form>
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ