Элементы формы HTML уроки для начинающих академия

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Дальше ❯

В этой главе описаны все элементы HTML-формы.

Элемент <input>

Наиболее важным элементом формы является элемент <input>.

Элемент <input> может отображаться несколькими способами в зависимости от атрибута type.

Пример

<input name=»firstname» type=»text»>

Если атрибут type опущен, поле ввода получает тип по умолчанию: «Text».

Все различные типы входных данных рассматриваются в следующей главе.

Элемент <select>

<select>элемент определяет раскрывающийся список:

Пример

<select name=»cars»>
  <option value=»volvo»>Volvo</option>
  <option value=»saab»>Saab</option>
  <option value=»fiat»>Fiat</option>
  <option value=»audi»>Audi</option>
</select>

Элементы <option> определяют параметр, который может быть выбран.

По умолчанию выбирается первый элемент в раскрывающемся списке.

Чтобы определить предварительно выбранный параметр, добавьте атрибут selected к параметру:

Пример

<option value=»fiat» selected>Fiat</option>

Видимые значения:

Используйте атрибут size для указания количества видимых значений:

Пример

<select name=»cars» size=»3″>
  <option value=»volvo»>Volvo</option>
  <option value=»saab»>Saab</option>
  <option value=»fiat»>Fiat</option>
  <option value=»audi»>Audi</option>

</select>

Разрешить множественный выбор:

Используйте атрибут multiple, чтобы позволить пользователю выбрать более одного значения:

Пример

<select name=»cars» size=»4″ multiple>
  <option value=»volvo»>Volvo</option>
  <option value=»saab»>Saab</option>
  <option value=»fiat»>Fiat</option>
  <option value=»audi»>Audi</option>
</select>

Элемент <textarea>

<textarea> элемент определяет многострочное поле ввода (область текста):

Пример

<textarea name=»message» rows=»10″ cols=»30″>
Кошка играла в саду.
</textarea>

Атрибут rows указывает видимое число строк в текстовой области.

Атрибут cols определяет видимую ширину текстовой области.

Таким образом, HTML-код выше будет отображаться в браузере:

Кошка играла в саду.

Можно также определить размер текстовой области с помощью CSS:

Пример

<textarea name=»message» style=»width:200px; height:600px»>
Кошка играла в саду.
</textarea>

Элемент <Button>

<button> элемент определяет нажатую кнопку:

Example

<button type=»button» onclick=»alert(‘Hello World!’)»>Click Me!</button>

Click Me!

HTML-форма и ее основные элементы

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

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

Вставка формы осуществляется напрямую в HTML—код страницы. Главный элемент формы называется <form>. Уже внутрь него добавляются все остальные элементы – текстовые поля, «чекбоксы», переключатели и т.д. У элемента <form> имеется несколько атрибутов, один из которых является обязательным. Он называется

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

Как правило, обработка происходит в стороннем PHP—файле. Пример использования атрибута– action=»obrabotchik.php«. Атрибут method позволяет задать метод передачи информации. По умолчанию (если не прописывать атрибут) будет указан метод GET. В данном случае информация передается напрямую через URL—адрес. Для каждого элемента формы будет создана пара следующего вида – «имя элемента = значение, которое в нем лежит». Все эти пары, разделенные знаком «амперсанд» будут перечислены в адресной строке.

Если прописать method=»POST» (регистр не важен), то данные будут передаваться не через URL, а через тело запроса (в скрытом режиме). В большинстве случаев используют именно POST.  Пример создания формы:

<form action=«obrabotka.php» method=«POST»>

     /*****ПОЛЯ ВВОДА********/

</form>

Содержание

  1. Атрибуты HTML-формы
  2. Поля ввода в HTML — форме
  3. Текстовое поле — type=»text»
  4.  Поле для пароля — type=»password»
  5. Чекбокс — type=»checkbox»
  6. Надпись над элементом — тег label
  7. Переключатель — type=»radio»
  8. Выпадающий список — тег select
  9.  Многострочное текстовое поле — тег textarea
  10. Кнопки в HTML — форме

Атрибуты HTML-формы

  1. Атрибут name — позволяет присвоить форме уникальное имя. Это нужно в том случае, если на одной странице размещено несколько форм.
  2. Атрибут enctype — позволяет задать способ кодирования информации из формы. Обычно его заполняют только тогда, когда при помощи формы происходит пересылка файлов. Вообще, здесь может быть три варианта —
    enctype= application/x—www—form—urlencoded | multipart/form—data | text/plain    . Первый вариант application/x—www—form—urlencoded говорит о том, что происходит пересылка закодированного текста. Третий вариант text/plain используют для пересылки текста в формате «как есть». Второй вариант  multipart/form—data используют для файлов.
  3. Атрибут формы autocomplete позволяет включить так называемое автозаполнение полей.

Поля ввода в HTML — форме

Теперь расскажем о том, какие элементы может содержать в себе форма. Прежде всего, это разного рода input’ы – элементы, предназначенные для ввода данных.

Текстовое поле — type=»text»

Самый распространенный input – обычное однострочное текстовое поле. В коде оно может выглядеть следующим образом:

<input type=«text» name=«t» maxlength=«10» value=«Иван»>

В атрибуте type, как вы поняли, указывается тип поля. Атрибут name – это уникальное имя поля (оно нужно для последующей обработки данных). Атрибут maxlength задает максимальную длину вводимого текста. Value – это значение поля по умолчанию (после загрузки страницы в этом поле сразу же будет прописано слово «Иван»).

 Поле для пароля — type=»password»

Еще один популярный input – поле для ввода пароля. Выглядит оно вот так:

<input type=«password» name=«p»>

Ключевая особенность – вводимые символы будут отображаться как звездочки.

Чекбокс — type=»checkbox»

Следующий элемент – чекбокс. В коде он может выглядеть примерно так:

<input type=«checkbox» id=«ch» name=«c» value=«1» checked>

Атрибут type здесь также задает тип. ID – это уникальный идентификатор, может использоваться для привязки к чекбоксу CSS—правил или текстовой надписи. Value

– это значение, посылаемое на обработку в том случае, если в чекбоксе поставлена галочка. Атрибут checked автоматически ставит галочку в чекбоксе сразу при загрузке страницы. У checked не нужно указывать значение, так как оно совпадает с именем атрибута.

Надпись над элементом — тег label

Следующий элемент – текстовая надпись (элемент label). Как правило, текст привязывают к какому—то уже существующему input’у. В этом случае надпись может выглядеть вот так:

<label for=«ch»>Текст для чекбокса</label>

Атрибут for осуществляет непосредственную привязку текста к элементу с id=»ch» (в нашем случае это чекбокс).

Переключатель — type=»radio»

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

<input type=«radio» name=«n» value=«qwe» checked>

<input type=«radio» name=«n» value=«qwe2»>

Атрибут type задает тип input’а. Name – это имя. Все input’ы в пределах одного переключателя должны иметь одно имя, иначе форма не свяжет их друг с другом. Value –это значение, передающееся при выборе того или иного элемента. Атрибут checked позволяет установить один и только один из элементов в включенное по умолчанию состояние.

Выпадающий список — тег select

Элемент формы select позволяет создать выпадающий список. У него есть несколько атрибутов. Name задает уникальное имя. Size задает количество элементов, отображающихся в списке одновременно (при загрузке страницы). По умолчанию size=1. Атрибут без значения multiple позволяет выбирать сразу несколько элементов, предварительно зажав клавишу Ctrl. Чтобы создать непосредственные элементы списка, используется тег

option. Текстовое содержимое данного тега будет отображаться в качестве элемента. При указании атрибута value внутри options на обработку будет передано его значение. Атрибут selected позволяет сделать выбранный элемент списка текущим (по аналогии с checked он будет выделен сразу при загрузке страницы). Несколько элементов можно объединить в группу, присвоив ей какое—то название. Делается это посредством тега optgroup, внутрь которого вставляются нужные option. Атрибут label задает группе название. Ниже приведен пример сгруппированного списка.

1

2

3

4

5

6

7

8

<select name=«s» size=«3» multiple>

   <optgroup label=«Список»>

     <option value=«1»>1 элемент</option>

     <option value=«2»>2 элемент</option>

     <option value=«3» selected>3 элемент</option>

     <option value=«4»>4 элемент</option>

   </optgroup>

</select>

 Многострочное текстовое поле — тег textarea

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

<textarea maxlength=«1000» name=«area» rows=«5» cols=«30»>

</textarea>

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

Кнопки в HTML — форме

Последние элементы, о которых мы поговорим – это кнопки. Типичная кнопка отправки формы может выглядеть так:

<input type=«submit» value=«Послать»>

В атрибуте value указывается надпись, которая будет отображаться на кнопке. Что касается type, то здесь может быть несколько вариантов. Submit создает кнопку подтверждения и отправки данных. Reset создает кнопку сброса всех введенных полей в изначальное состояние. Button создает кастомную кнопку без привязанного к ней действия по умолчанию (впоследствии можно будет навесить на нее какой—нибудь скрипт). Image также создает кастомную кнопку, у которой вместо текста будет использоваться изображение. Путь к изображению необходимо указать в атрибуте src.

 

 

HTML-элементы формы (с примерами)

В этом уроке мы узнаем об элементах формы в HTML с помощью примеров.

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

Вывод браузера

Здесь и — все элементы формы HTML.

Элементы формы HTML

Существуют различные элементы формы HTML для различных типов ввода. В HTML5 доступны следующие элементы формы:

  • HTML тег
  • HTML <метка> тег
  • HTML <кнопка> тег
  • HTML <выбрать> , и теги
  • HTML

    Вывод браузера

    Здесь атрибуты rows и cols представляют строки и столбцы текстовое поле.

    Тег HTML

    Тег HTML

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

     <форма>
    <набор полей>

    Вывод браузера

    Здесь граница элемента

    .

    HTML-тег

    HTML-тег — это еще один презентационный тег, используемый для добавления подписи к элементу

    . Он действует аналогично тегу HTML . Например, 

     <форма>
    <набор полей>
    <легенда>Имя

    Вывод браузера

    Тег HTML

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

     

<список данных>

    Вывод браузера

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

    Тег HTML

    Тег HTML < output > представляет собой элемент-контейнер, который используется для хранения результатов вычислений, обычно выполняемых с использованием javascript. Например, 

     <форма>
     +
     =
    

<скрипт>
    постоянный вывод = document.getElementsByName ("результат") [0]
    const inputA = document.getElementById('a')
    const inputB = document.getElementById('b')
    output.innerText = Число (inputA.value) + Число (inputB.value)

    Вывод браузера

    Атрибут для тега принимает разделенные пробелами значения всех входных данных, используемых в вычислении. Вы можете заметить, что мы использовали a b внутри вместо . Это означает, что выходные данные внутри тега были сгенерированы с использованием входных данных a и b .

    Значение внутри обычно генерируется из Javascript и заполняется внутри элемента. Здесь мы вычислили сумму обоих входов и вставили ее в <выход> элемент.

    HTML-элементы формы | Полное руководство по элементам HTML-форм

    В технологиях веб-разработки (особенно для внешнего интерфейса) «HTML» — это основной или основной язык разметки, который мы используем для отображения веб-страниц (страницы, которую мы видим на веб-сайте). ). Иногда на HTML-странице, наряду с отображением другого контента, нам также необходимо принимать некоторые пользовательские данные (особенно на динамических веб-сайтах). И чтобы принять пользовательский ввод на HTML-странице, нам нужно использовать несколько элементов формы для правильного создания этих форм, и с помощью этих форм мы правильно принимаем пользовательский ввод и помещаем эти вводы (данные) в наши внутренние базы данных по адресу задняя часть. Теперь, когда мы знаем, что HTML-коды записываются под различными элементами тега (<>), так что, по сути, «элементы формы HTML» — это те элементы, которые используются внутри тега «», и эти элементы вместе с другими стандартные и уникальные атрибуты также дают форму и структуру, которые позволяют пользователям знать, что делать с формой и как действовать структурно.

    Объяснение элементов формы HTML 

    (включая синтаксис и примеры с выводом)

    Поскольку существует несколько элементов формы HTML для создания формы и придания ей надлежащего вида в структурированном виде, ниже некоторые из них объясняются по одному .

    SL № Метки Значения/описания

    1

    		<форма> Чтобы определить HTML-форму для ввода данных пользователем

    2

    		<ввод> Чтобы определить управление вводом

    3

    		<список данных> Чтобы указать список предустановленных параметров

    4

    		<набор полей> Чтобы определить элементы, связанные с группой

    5

    		<кейген> Чтобы определить безопасный вход

    6

    		<метка> Чтобы определить метку ввода

    7

    		<легенда> Чтобы определить заголовок для набора полей

    8

    		<оптгруппа>

    Для определения группы похожих опций.

     

    9

    		 

    <опция>

    Чтобы определить параметр раскрывающегося списка.

     

    10

    		 

    <выход>

    		 

    Для определения результата

     

    11

    		 

    <выбрать>

    		 

    Чтобы определить список раскрывающегося списка.

     

    12

    <текстовое поле>

    		 

    Для определения области многострочного ввода.

    Примечание: Большинство обсуждаемых здесь элементов тегов HTML относятся к HTML5, последней версии языка HTML. Элемент тега больше не поддерживается в HTML5; на самом деле он использовался для предыдущей версии HTML.

    Синтаксис и пример

    Некоторые синтаксис и примеры элементов форм HTML с выводами обсуждаются ниже:

    1.
    Элемент «»

    Этот элемент может содержать множество других элементов, включая следующие:

    • <выход>
    • <метка>
    • <выбрать>
    • <кнопка>
    • <опция>
    • <текстовое поле>
    • <оптгруппа>
    • <набор полей>

    Пример элемента «» с кнопкой ввода и отправки:

    Синтаксис: 

     
Ваше имя:

    Коды: 

     

<тело>
<форма action="/test_page.php">
Ваше имя:

    Вывод:

    2. Элемент «
    »

      Этот элемент является встроенным и принадлежит к группе элементов формы.

    Синтаксис: 

      php">
Введите имя: 
    
Введите возраст:

    Коды: 

     

<тело>
<форма action="/action_page.php">
Введите имя: 
    
Введите возраст:

    Выходные данные:

           

    3. Элемент «
    »

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

    Синтаксис: 

     
<список данных>

    Коды: 

     

<тело>

     php" method="get">

<список данных>

    Вывод:

    4. Элемент «
    »

    Этот элемент в основном используется для группировки связанных элементов в формах и рисует рамку вокруг похожих элементов.

    Синтаксис: 

     <форма>
<набор полей>
Знаменитость:
Имя: 
    
Телефон: 
    
Возраст:

    Коды: 

     

<тело>
<форма>
<набор полей>
Знаменитость:
Имя: 
    
Телефон: 
    
Возраст:

    Вывод:

    5.
    Элемент «»

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

    Синтаксис:

    Коды: 

     

<тело>

Имя пользователя: 
<тип ввода="отправить">


    Упомянутое ниже поле генератора ключей находится за пределами формы, но по-прежнему является ее частью.
    
Шифрование:

    Вывод:

    6. Элемент «