Как создать форму в HTML

Как создать форму в HTML

Сбор данных от пользователя веб-сайта может осуществляться несколькими способами. Формы на веб-сайтах могут иметь простую функцию, такую ​​как подписка пользователя на информационный бюллетень, или более сложную цель, например, выступать в качестве формы заявления о приеме на работу.





Однако одна вещь, которая объединяет все эти простые и сложные формы, - это HTML, а точнее, HTML. ярлык.



Использование тега формы

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





В Тег имеет важный атрибут, который способствует его функциональности. Этот атрибут называется действием и используется для идентификации файла, в который будут переданы данные, введенные в форму.

Использование примера тега





В приведенном выше примере показано, как использовать тег формы в ваших проектах. Один из основных выводов заключается в том, что если вы открываете тег формы, вы должны не забывать его закрыть. Это создаст структуру формы, а также обеспечит правильную обработку данных, введенных в форму.



Использование тега

В Тег используется для описания данных в каждом поле ввода в форме. Этот тег имеет для атрибут, который используется для расширения функциональности формы.

Связанный: Лучшие бесплатные онлайн-редакторы HTML для тестирования вашего кода



Если идентификатор, присвоенный соответствующему полю ввода, совпадает с для ценность в тег, то это поле ввода будет автоматически выделено, когда вы нажмете на метку.

Использование примера тега


First Name:

В приведенном выше примере вы можете видеть, что для атрибуту присваивается значение имя . Поэтому, если вы создаете поле ввода с имя id, это поле будет подсвечиваться каждый раз, когда вы нажимаете на Первый Имя метка.



Использование тега

В своей основной форме можно увидеть как текстовое поле. В тег захватывает данные от пользователя, и одной из его наиболее важных функций является тип атрибут. В тип Атрибут указывает тип данных, которые может собирать это текстовое поле.

Связанный: Как создать составную форму в CSS

Есть несколько разных значений, которые вы можете присвоить тип атрибут, но некоторые из наиболее популярных из них следующие.

  • Текст
  • Число
  • Эл. адрес
  • Изображение
  • Дата
  • Флажок
  • Радио
  • Пароль

Использование тега Пример


First Name:

В Тег в приведенном выше коде имеет три разных атрибута, каждый из которых имеет уникальную функцию. В тип Атрибуту присваивается текстовое значение, что означает, что текстовое поле будет принимать только символы.

В я бы Атрибут - это уникальный идентификатор текстового поля, и он важен, поскольку обеспечивает доступ к этому элементу из файла CSS. В имя атрибут также является уникальным идентификатором; однако атрибут name используется для взаимодействия с элементом на стороне сервера разработки.

В я бы а также имя Атрибутам обычно присваивается одно и то же значение, так как один обеспечивает доступ к элементу со стороны клиента, а другой - со стороны сервера.

Использование элемента Checkbox

Элемент флажка очень уникален по сравнению с другими элементами, которые вы можете использовать с ярлык. Это позволяет пользователю выбрать один или несколько вариантов из списка связанных вариантов. Флажки легко идентифицировать, потому что они представлены крошечными квадратными полями, которые содержат флажок, когда они выбраны.

Использование примера элемента флажка


Programming Languages:
Java
JavaScript
Python

В приведенном выше примере каждый из элементов флажка имеет атрибут значения, и это важно, поскольку помогает отличить каждый параметр флажка от коллекции. Следовательно, если пользователь выбирает «Java» из приведенных выше вариантов, данные будут отражать это.

Использование тега и радиоэлементов

В тег и радиоэлементы похожи в том смысле, что они позволяют пользователю выбирать только одно значение за раз; следовательно, можно сказать, что они выполняют одну и ту же функцию. Однако внешне они очень разные.

Радиоэлемент по внешнему виду ближе к элементу флажка, однако с радиоэлементом у вас есть круги вместо квадратов.

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

Использование примера тега и радиоэлемента


Sex:

Male
Female
Other


Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer

Использование элемента даты

Элемент даты создает небольшое текстовое поле, при нажатии которого создается календарь. С использованием Дата в качестве типа ввода в ваших формах защищает от потенциального ввода пользователем неправильной даты, что потенциально может привести к сбору ошибочных данных.

Использование примера элемента даты


Использование элемента электронной почты и пароля

Когда разработчик назначает адрес электронной почты или пароль для атрибута type тег, каждый из них создает идентичное текстовое поле. Однако, когда вы начнете использовать эти коробки, различия станут очевидными.

Элемент электронной почты отслеживает данные, введенные в текстовое поле, и гарантирует, что каждое отправленное сообщение соответствует стандартным требованиям к адресу электронной почты; что означает наличие локальной части, за которой следует символ @, и заканчивающаяся доменом.

Использование примера элемента электронной почты


В приведенном выше примере вы познакомились с новым атрибутом, который называется заполнитель , и этот атрибут принимает текстовое значение, которое отображается в текстовом поле блеклым серым цветом. Этот текст используется для обозначения данных, которые должны быть помещены в текстовое поле, как показано в примере выше.

Элемент пароля превращает символы в звездочки по мере их ввода в текстовое поле. Следовательно, если экран вашего компьютера виден другим людям, они не увидят введенный вами пароль.

Использование примера элемента пароля


Использование тега кнопки

В форме обычно есть кнопки двух разных типов. Первая - это кнопка отправки, которая отправляет данные, введенные в форму, в значение, присвоенное атрибуту действия (который находится в < форма> ярлык).

Пример кнопки 'Отправить'

Submit

Второй тип кнопок, которые обычно используются в форме, - это кнопка сброса, которая очищает данные в форме, чтобы пользователь мог вводить свежие данные. В тег имеет тип атрибут, который используется для обозначения функции кнопки. В приведенном выше примере тип атрибуту присваивается значение Разместить , поэтому кнопка с тип значение сброс настроек используется для сброса формы.

Пример кнопки сброса

Reset

Создание формы

Чтобы создать простую форму в HTML, вам нужно заключить все элементы, упомянутые выше, в ярлык.

Создание примера формы






Forms








First Name:

Last Name:




Date of birth:

Age:




Gender:

Male
Female
Other

Email Address:




Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer



Programming Languages:
Java
JavaScript
Python



Password:

Confirm Password:



Submit
Reset




Приведенный выше код создаст следующую форму:

Законно ли скачивать видео с YouTube?

Теперь вы можете создать простую форму в HTML

В этой статье представлены все инструменты для создания функциональной HTML-формы. Он определяет различные теги HTML, которые используются при создании форм, и исследует различные атрибуты, которые можно использовать с этими тегами.

Однако большинство форм, которые вы видите на веб-сайтах, имеют один дополнительный компонент; CSS, который используется, чтобы оживить форму и сделать ее более эстетичной.

Делиться Делиться Твитнуть Эл. адрес Шпаргалка по основным свойствам CSS3

Освойте основной синтаксис CSS с помощью нашей шпаргалки по свойствам CSS3.

Читать далее Похожие темы
  • Программирование
  • HTML
  • Веб-разработка
  • Учебники по кодированию
Об авторе Кадейша Кин(Опубликовано 21 статья)

Кадейша Кин (Kadeisha Kean) - разработчик программного обеспечения полного стека и писатель по техническим / технологическим вопросам. У нее отличная способность упрощать некоторые из самых сложных технологических концепций; производство материала, понятного любому новичку в технологии. Она увлечена писательством, разработкой интересного программного обеспечения и путешествиями по миру (с помощью документальных фильмов).

Ещё от Kadeisha Kean

Подписывайтесь на нашу новостную рассылку

Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!

Нажмите здесь, чтобы подписаться