HTML Вводные элементы управления

Введение

В HTML тег <input> используется для создания различных типов полей ввода. В этом практическом занятии будет показано, как создавать разные типы полей ввода в HTML-форме с использованием тега <input> с соответствующим атрибутом type.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Skills Graph

Создание текстового поля ввода

Создайте новый HTML-файл с именем index.html. Этот файл будет содержать HTML-код для формы ввода.

Для создания текстового поля ввода используйте следующий HTML-код:

<label for="username">Имя пользователя:</label><br />
<input type="text" id="username" name="username" /><br />

В коде мы создали метку для поля ввода, установили атрибут type равным "text" и присвоили атрибуты id и name. Этот код создаст текстовое поле ввода для пользователя, чтобы он мог ввести свое имя пользователя.

Создание поля ввода пароля

Для создания поля ввода пароля используйте следующий код:

<label for="password">Пароль:</label><br />
<input type="password" id="password" name="password" /><br />

В коде мы установили атрибут type равным "password", что будет скрывать символы пароля, которые вводит пользователь.

Создание поля ввода с чекбоксом

Для создания поля ввода с чекбоксом используйте следующий код:

<label for="vehicle1">У меня есть автомобиль</label>
<input type="checkbox" id="vehicle1" name="vehicle1" value="car" />
<br />
<label for="vehicle2">У меня есть велосипед</label>
<input type="checkbox" id="vehicle2" name="vehicle2" value="bike" />
<br />
<label for="vehicle3">У меня есть лодка</label>
<input type="checkbox" id="vehicle3" name="vehicle3" value="boat" />

В коде мы создали три чекбокса для выбора пользователем. Обратите внимание, что каждый чекбокс имеет разные атрибуты id, name и value.

Создание поля ввода с радиокнопкой

Для создания поля ввода с радиокнопкой используйте следующий код:

<label for="male">Мужской</label>
<input type="radio" id="male" name="gender" value="male" />
<br />
<label for="female">Женский</label>
<input type="radio" id="female" name="gender" value="female" />
<br />
<label for="other">Другой</label>
<input type="radio" id="other" name="gender" value="other" />

В коде мы создали три радиокнопки для выбора пола пользователем. Обратите внимание, что каждая радиокнопка имеет разные атрибуты id, name и value.

Создание кнопки отправки

Для создания кнопки отправки используйте следующий код:

<input type="submit" value="Отправить" />

В коде мы создали кнопку, которую пользователь нажмет для отправки формы.

Резюме

В этом практическом занятии мы научились создавать различные типы полей ввода в HTML-форме с использованием тега <input> с соответствующим атрибутом type. Мы создали текстовое поле ввода, поле ввода пароля, чекбокс, радиокнопку и кнопку отправки. Вы можете использовать эти примеры в качестве основы для создания более сложных HTML-форм, которые собирают ввод пользователя.