Проверка форм

Эта статья объясняет проверку форм.

В нём объясняется проверка форм в HTML.

YouTube Video

Проверка форм в HTML

Обзор проверки форм в HTML

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

Атрибут required

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" required placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• Атрибут required указывает, что поля ввода должны быть заполнены перед отправкой формы.

Атрибут pattern

1<form>
2  <label for="username">Username (letters and numbers only):</label>
3  <input type="text" id="username" name="username" pattern="[A-Za-z0-9]+" required>
4  <button type="submit">Submit</button>
5</form>

• Атрибут pattern используется для проверки, соответствует ли ввод формы определённому шаблону регулярного выражения. Например, этот атрибут проверяет, содержит ли имя пользователя только буквенно-цифровые символы.

Атрибуты min и max

1<form>
2    <label for="age">Age:</label>
3    <input type="number" id="age" name="age" min="18" max="99" placeholder="Enter your age">
4    <button type="submit">Submit</button>
5</form>

• Атрибуты <min> и <max> используются для задания минимального и максимального допустимых значений для элемента ввода. Они часто используются с типами ввода, такими как number, range и date.
• В этом примере вы можете ввести число от 18 до 99.

Атрибуты minlength и maxlength

1<form>
2    <label for="username">Username:</label>
3    <input type="text" id="username" name="username" minlength="4" maxlength="12" placeholder="4-12 characters">
4    <button type="submit">Submit</button>
5</form>

• Атрибут minlength задаёт минимальное количество символов, необходимых для поля ввода, а атрибут maxlength определяет максимальное количество разрешённых символов.
• В этом примере вы можете ввести текст длиной от 4 до 12 символов.

Атрибут type="email"

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• Атрибут type="email" используется для проверки, что введённые данные имеют корректный формат адреса электронной почты. Этот атрибут обеспечивает встроенную проверку для полей ввода адреса электронной почты.

Атрибут type="url"

1<form>
2    <label for="website">Website:</label>
3    <input type="url" id="website" name="website" placeholder="https://example.com" required>
4    <button type="submit">Submit</button>
5</form>

• <input type="url"> создаёт поле ввода, которое требует указания корректного URL. Браузер автоматически проверяет, соответствует ли ввод корректному URL.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video