Создание формы html: Формы и поля в HTML. Все о HTML формах

Leave a Comment / Html / By /

Содержание

HTML формы

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

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

Основные теги, используемые для создания HTML форм, — это тег <form>, тег <input>, тег <textarea>, тег <select> и тег <option>.

Тег <form> создает форму. Он требует наличия одного обязательного атрибута – action. В этом атрибуте указывается адрес, по которому форма будет отсылать свои данные после того, как пользователь отдаст команду «отправить».

Необязательный атрибут method указывает на то, каким образом должны отсылаться данные формы.

Он может принимать два значения – get (значение по умолчанию) и post. При последнем значении данные во время отсылки скрываются (при значении get данные формы прикрепляются к URL).

Таким образом, элемент формы будет иметь приблизительно следующий вид:

<form action='processingscript.php' method='post'>
   ...
</form>

Тег <input> – это основа всего мира форм. Он может быть десяти видов:

  • <input type=»text» /> — стандартное текстовое поле. Также здесь может присутствовать атрибут value, который определяет текст по умолчанию, заданный в текстовом поле.
  • <input type=»password» /> — то же текстовое поле, однако вводимые пользователем символы будут скрыты.
  • <input type=»checkbox» /> — создает поле выключателей (checkbox) или флажков, которые пользователь может либо включить, либо отключить. Также здесь можно использовать атрибут
    checked    , который используется в формате <input type=»checkbox» checked=»checked» /> и который задает начальное состояние флажка «включен».
  • <input type=»radio» /> — создает поле переключателей, которые очень похожи на флажки, однако в этом случае пользователь может выбрать только один объект в группе переключателей. Здесь также можно использовать атрибут checked, который задается аналогичным образом, как и в случае с флажками.
  • <input type=»file» /> — создает поле ввода, которое показывает файлы на вашем компьютере подобно тому, как вы открываете или сохраняете документы в большинстве программ. Оно позволяет пользователям загружать файлы на сервер.
  • <input
    type=»submit»     /> — создает кнопку отправки данных формы программе-обработчику. Можно самому задавать текст, который будет отображаться на кнопке отправки (то же самое можно сделать и с типами button и reset – см.ниже). Это делается при помощи атрибута value, например, <input type=»submit» value=»Ого. Надпись на кнопке» />.
  • <input type=»image» /> — создает специальную кнопку отправки, в качестве которой будет использоваться активное изображение. При этом серверу кроме данных формы еще отправляются и координаты (x, y) нажатия мыши на изображение. Также необходимо указывать атрибут src, который играет ту же роль, что и в теге <img>.
  • <input type=»button» /> — создает кнопку, которая без дополнительного кода ничего не будет делать.
  • <input type=»reset» /> — создает кнопку, которая при нажатии на нее возвращает все поля формы к значениям по умолчанию.
  • <input type=»hidden» /> — создает поле, которое не отображается в окне браузера. Оно используется для передачи различной вспомогательной информации, например, имени страницы, на которой находится пользователь, или электронный адрес, куда должна пересылаться форма.

Обратите внимание, что тег <input> закрывает сам себя при помощи конструкции «/>».

Тег <textarea> – создает многострочную область ввода текста. Он требует использование атрибутов rows и cols, которые задают размер области ввода:

<textarea rows="5" cols="20">Здесь вводят много текстовой информации</textarea>

Тег <select> и тег <option> используются для создания разворачивающего или выпадающего меню. Они работают следующим образом:

<select>
  <option value="first option">Опция 1</option>
  <option value="second option">Опция 2</option>
  <option value="third option">Опция 3</option>
</select>

При отправке данных формы посылается выбранный элемент списка.

Аналогично атрибуту checked в флажках и переключателях тег <option> может иметь атрибут selected:

<option value="mouse" selected="selected">Грызун</option>

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

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

<input type="text" name="talkingsponge" />

Форма может иметь, например, следующий вид. (Внимание: форма не будет работать до тех пор, пока не будет реализован скрипт «contactus.php», указанный в атрибуте action тега <form>, и который обрабатывает передаваемые данные.)

<form action='contactus.php' method="post">
   <p>Имя:</p>
   <p><input type="text" name="name" value="Ваше имя" /></p>
   <p>Комментарий: </p>
   <p><textarea name="comments" rows="5" cols="20">Ваш комментарий</textarea></p>
   <p>Вы:</p>
   <p><input type="radio" name="areyou" value="male" /> Мужчина</p>
   <p><input type="radio" name="areyou" value="female" /> Женщина</p>
   <p><input type="radio" name="areyou" value="hermaphrodite" /> Ни то ни другое</p>
   <p><input type="submit" /></p>
   <p><input type="reset" /></p>
</form>

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

Создание форм в HTML | bookhtml.ru

В этом уроке html займемся созданием форм в html. Это те самые формы, которые позволяют пользователю регистрироваться на сайте, входить на сайт, отправлять e-mail администратору и т.д. Через такие формы на многих сайтах посетители могут общаться с владельцем сайта (отсылать ему какие-то данные).

Форма — это набор полей для ввода, при этом каждое поле имеет свое уникальное имя. Сама по себе она ничего не значит — это обычный объект HTML. Для получения данных из формы, нужен какой-то обработчик. Так что имейте в виду, что форма состоит из двух частей: одна — это внешняя часть, которая видна на html-странице куда пользователь вводит данные. Вторая часть — это обработчик, который принимает на себя данные из каждого поля формы и совершает над ними какие-то действия.

Обработчик пишется на каком-то языке программирования, простым html не обойтись. В нашем случае это будет язык PHP (в него мы вникать не будем).

Перед тем как мы приступим к созданию формы давайте создадим блокнотом еще одну html-страницу, в которой будем записывать html-код нашей формы. Пусть это будет formpage.html.

В этой странице нам понадобится одна таблица с одной строкой и одной ячейкой.

Пример:

<!DOCTYPE html public «-//W3C//DTD html 4.01 Transitional//EN»>

<html>

<head>

<title>страница изучения форм</title>

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>

<meta name=»Keywords» content=»формы»>

<meta name=»Description» content=»создание форм в html»>

</head>

<body>

<h2 align=»center»>Формы</h2>

<table border=»1″ bgcolor=»white» align=»center» bordercolor=»black» cellpadding=»10″>

<tr>

<td>

</td>

</tr>

</table>

</body>

</html>


Проверьте в браузере как выглядит наша страничка для изучения написания форм.

Форма создается с помощью парного тега <form>, который имеет несколько основных атрибутов. Это атрибут action — обработчик (какой файл будет обрабатывать данные формы), атрибут method — как будут пересылаться данные от формы к обработчику (значение «GET» — открытая передача через строку браузера или «POST» — закрытый метод (пользователи не увидят какие данные передаются в обработчик). Обычно используется метод POST.

Еще один атрибут — name: мы должны указать имя формы.

Пример:


<h2 align=»center»>Формы</h2>

<table border=»1″ bgcolor=»white» align=»center» bordercolor=»black» cellpadding=»10″>

<tr>

<td>

<form action=»obrabotka.php» method=»POST» name=»form1″>

</form>

</td>

</tr>

</table>

Тег формы у нас готов, далее будем вставлять в него элементы (поля для ввода данных).

Для примера создадим форму заказа какого-нибудь товара. Первым сделаем поле ввода ФИО. Прописываем в html-коде абзац с указаниями для пользователя.

<p>Введите свое ФИО</p>

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

Пример:

<h2 align=»center»>Формы</h2>

<table border=»1″ bgcolor=»white» align=»center» bordercolor=»black» cellpadding=»10″>

<tr>

<td>

<form action=»obrabotka.php» method=»POST» name=»form1″>

<p>Введите свое ФИО<br>

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

</p>

</form>

</td>

</tr>

</table>


Атрибут type со значением text — поле для ввода текста. Атрибут name — обязательно дать имя полю.

Следующим абзацем создадим поле ввода пароля.

Пример:

<h2 align=»center»>Формы</h2>

<table border=»1″ bgcolor=»white» align=»center» bordercolor=»black» cellpadding=»10″>

<tr>

<td>

<form action=»obrabotka.php» method=»POST» name=»form1″>

<p>Введите свое ФИО<br>

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

</p>

<p>Введите пароль<br>

<input type=»password» name=»pass»>

</p>

</form>

</td>

</tr>

</table>

Как мы видим — изменились тип и имя поля. Тип «password» позволяет нам вводить пароль скрытый для чтения.

Добавим поле ввода email:

<p>Введите свой email<br>

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

</p>

Далее появляется новый элемент — radioпереключатель, который позволяет выбрать только одну позицию из нескольких. В нашем примере — это выбрать формат диска: CD или DVD.

<p>Выберите формат диска<br>

<input type=»radio» name=»format» value=»cd»>CD<br>

<input type=»radio» name=»format» value=»dvd»>DVD<br>

</p>

У нас появился новый тип тега <input> это type=»radio». И еще мы видим что оба поля имеют одинаковое имя. Это говорит браузеру о том, что можно выбрать только один элемент.Если же мы зададим каждому элементу разное имя, то клиент сможет выбрать сразу два элемента.

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

Теперь давайте добавим еще один переключатель, который позволит пользователю выбрать оба элемента. Тип такого переключателя — checkbox. Имена элементам задаем разные.

Пример:

<p>Какие курсы должны быть на диске<br>

<input type=»checkbox» name=»site»>Курс по созданию сайтов<br>

<input type=»checkbox» name=»book» >Курс по созданию книг<br>

</p>

Еще один элемент формы — это выпадающий список. Для его создания так же прописываем новый абзац и используем другой тег — это парный тег <select> и уже внутри этого тега прописываем пункты нашего выпадающего списка, вписывая каждый пункт списка в парный тег <option>.

Пример:

<p>Выберите тип доставки<br>

<select name=»delivery»>

<option>Срочная</option>

<option>Обычная</option>

</select>

</p>

Если мы хотим что бы были видны оба пункта можно к тегу <select> применить атрибут size, указав в значении количество пунктов. Но выбрать можно только один. Если же надо сделать так, что-бы пользователь мог выбрать несколько пунктов, используем атрибут multiple присвоив ему такое-же значение — multiple.

Следующий элемент формы — текстовая область. Применяем тег <textarea>.

Пример:

<p>Введите адрес доставки<br>

<textarea name=»address» cols=»40″ rows=»5″>

</textarea>

</p>


В значении атрибута cols указываем количество символов в ширину, а в значении атрибута rows — количество рядов (строк). Если будет больше рядов, чем прописано — появится прокрутка.

И последний элемент нашей формы — кнопка «отправить». Открываем новый абзац и через тег <input> создаем кнопочку. Только тип этого тега будет уже «submit» — это говорит о том. что эта кнопка будет отправлять данные в обработчик.

Пример:

<p>

<input type=»submit» name=»button» value=»Отправить»>

</p>

Слово, прописанное в значении атрибута value, будет видно на нашей кнопке отправления.

Вот так выглядит весь html-код нашей созданной формы:

<!DOCTYPE html public «-//W3C//DTD html 4.01 Transitional//EN»>

<html>

<head>

<title>страница изучения форм</title>

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>

<meta name=»Keywords» content=»формы»>

<meta name=»Description» content=»создание форм в html»>

</head>

<body>

<h2 align=»center»>Формы</h2>

<table border=»1″ bgcolor=»white» align=»center» bordercolor=»black» cellpadding=»10″>

<tr>

<td>

<form action=»obrabotka. php» method=»POST» name=»form1″>

<p>Введите свое ФИО<br>

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

</p>

<p>Введите пароль<br>

<input type=»password» name=»pass»>

</p>

<p>Введите свой email<br>

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

</p>

<p>Выберите формат диска<br>

<input type=»radio» name=»format» value=»cd»>CD<br>

<input type=»radio» name=»format» value=»dvd» checked>DVD<br>

</p>

<p>Какие курсы должны быть на диске<br>

<input type=»checkbox» name=»site»>Курс по созданию сайтов<br>

<input type=»checkbox» name=»book» >Курс по созданию книг<br>

</p>

<p>Выберите тип доставки<br>

<select name=»delivery»>

<option>Срочная</option>

<option>Обычная</option>

</select>

</p>

<p>Введите адрес доставки<br>

<textarea name=»address» cols=»40″ rows=»5″>

</textarea>

</p>

<p>

<input type=»submit» name=»button» value=»Отправить»>

</p>

</form>

</td>

</tr>

</table>

</body>

</html>

Можно проверить в браузере. Кнопка «Отправить» пока не работает так как обработчика у нас нет. Об этом можно узнать из урока по созданию обработчика форм.

И еще один момент — как сделать чтобы при загрузке формы в переключателях был выбран какой-то пункт. Для этого прописываем этому элементу ключевое слово checked — что означает — отмеченный.

Пример:

<p>Выберите формат диска<br>

<input type=»radio» name=»format» value=»cd»>CD<br>

<input type=»radio» name=»format» value=»dvd» checked>DVD<br>

</p>

Закончим о создании форм.

HTML Forms — GeeksforGeeks

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

Что такое HTML

?

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

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

Синтаксис: 

 <форма>

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

Это следующие элементы HTML

:

  • Он определяет метку для элементов.
  • <ввод>: Используется для получения входных данных из формы в различных типах, таких как текст, пароль, электронная почта и т. д., путем изменения их типа.

  • Примечание: атрибут name используется для ссылки на данные textarea после их отправки на сервер.

    Example:

    HTML

    < html >

    < head >

       < title >Page Title title >

    head >

    < body >

       < h3 >Добро пожаловать в GeeksforGeeks h3 >

       >

    3 форма 0098      < textarea name = "welcomeMessage" rows = "3" cols = "40" >GeeksforGeeks is a online portal< / textarea >

       form >

    body >

    html >

    Вывод:

    Сначала создайте HTML-форму для ввода основных сведений о студенте, таких как Приветствие

    5 90 Фамилия, адрес электронной почты, телефон, пол, дата рождения и адрес.

    Чтобы создать эту форму, нам нужно использовать тег для определения заголовка, тег для имени, фамилии, адреса электронной почты, Телефон, дата рождения, изменив атрибут типа тега ,

    Выход

    Пример создания текстовой области в HTML

    Текст здесь. . .

    Элемент Fieldset в HTML

    Используйте элемент

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

    Пример — HTML-форма Страница с использованием элемента Fieldset 

     

<тело>

 
    Группы элементов Fieldset формируют данные
     

    Используйте элемент fieldset для формирования связанных данных в группе. 
Заголовок элемента fieldset определяется элементом Legend.

    

<форма действие="Форма.php">
<набор полей>

Сведения о сотруднике:

Имя:

    
Идентификатор электронной почты:

    
Идентификатор сотрудника:

    
Номер телефона:

    Код ссылки в действии (Form.php) 

     


<тело>

    Выход

    Группы элементов набора полей формируют данные

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

    Сведения о сотруднике: Имя:

    Идентификатор электронной почты:

    Идентификатор сотрудника:

    Тел.№:

    Подписаться на @tutorial_brain

    Элемент HTML

    Элемент HTML

    .

    Пример 

     

<тело>

 
    В HTML элемент выбора определяет раскрывающийся список
     

<форма действие="Форма.php">
<выбрать имя="Мобильные телефоны">









    
<тип ввода="отправить">

    Код ссылки в действии (Form.

    php) 

     

<голова>
Форма отправлена ​​

<тело>

    Вывод

    В элементе выбора HTML определяется раскрывающийся список

    SONYAPPLEHTCNOKIASAMSUNGMOTOROLA

    Выберите несколько вариантов

    Пример 

     

<тело>

 
    Список опций виден.
     

    Ctrl+щелчок левой кнопкой мыши, чтобы выделить все
    
<форма action='Form.php'>










    
<тип ввода='отправить'>

    Выход

    Список опций виден.

    SONYAPPLEHTCNOKIASAMSUNGMOTOROLA

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

    Тег

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

    Пример 

     

<тело>

 
    Пример элемента списка данных
     

    Предопределенный параметр указывается в раскрывающемся списке с помощью элемента списка данных
    

<форма>

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

    Вывод

    Пример для элемента списка данных

    Предопределенная опция указывается в раскрывающемся списке с использованием элемента списка данных

    Тег

    Элемент объявляет результаты вычислений.

    +

    Итого =

    Пример 

     

<тип ввода ="диапазон" имя ="M1" значение ="0" /> +
<тип ввода ="число" имя ="M2" значение ="1000" />


    

Итого = <имя вывода ="totalresult">

    Интервью Вопросы и ответы

    1. Определение форм в HTML.

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

    .

    1. Объясните пять новых типов ввода, предоставляемых HTML5 для форм?

    Пять новых типов ввода, предоставленных HTML5 для форм: -

    1. datetime : Позволяет пользователю выбрать дату и время с часовым поясом.
    2. datetime-local : позволяет пользователю выбрать дату и время без часового пояса.
    3. дата : Позволяет пользователю выбрать дату.
    4. месяц : Позволяет пользователю выбрать месяц и год.
    5. электронная почта : используется для адреса электронной почты.
    1. Что такое тег кнопки?

    Тег Button используется для создания нажимаемой кнопки, такой как «отправить» или «сбросить» в HTML-форме.
    Синтаксис: -
    .

    1. Что такое тег <datalist> в HTML5?

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

     

<тело>
 
    Пример элемента списка данных
     

    Предопределенный параметр указывается в раскрывающемся списке с помощью элемента списка данных
    
<форма>

<список данных>
    1. Какие новые типы &linput> используются для проверки формы в HTML5?

    The new input types for form validation are month , date , datetime , datetime-local , week , color , email , tel , time , url , диапазон , поиск , номер .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *