HTML ФОРМЫ

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

 <form> - элемент который определяет HTML форму.
<form>
……
form elements
……
</form>

HTML имеет набор полей формы, которые можно использовать, такие как

  • Текстовое поле
  • Текстовая область
  • Флажок
  • Переключатели
  • Окно
  • Поле файла
  • Кнопка
  • Кнопка Изображение
  • Поместить кнопку.

Элемент <вход в систему>
Вот пример <вход в систему>, которую вы встречаете каждый день, входя на сайт, на почту, в социальную сеть

<title> вход в систему </title>
</head>
<body>
<form name="f1" method="get" action=" surname_name.php. ">
<input name="link" type="hidden" value="index.php" />
e-mail: <br />
<input name=" e-mail " type="text" size="30" maxlength="35" value="Max" /> <br />
Password: <br />
<input name="pd" type="password" size="30" maxlength="35" value="" /> <br />
<input name="remember" type="checkbox" value="yes" /> Запомнить <br />
<input type="submit" name="enter" value="Вход" />
</form>
</body>
</html>

вход в систему

e-mail:

Password:

Запомнить

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

  • <form> </form> – определяет HTML форму .
  • “Name” – имя формы.
  • “method” – с помощью этого элемента, для передачи информации пользователя на сервер. Элемент "get" способ передавать объемы информации.
  • “action” – определяет адрес url по которому информация отправляется на обработку. В нашем примере –surname_name.php.
  • <input /> – определяют набор полей, например текстовые поля, переключатели кнопки.
  • "text" – текстовое поле.
  • "password" – в этом поле прописывается пароль.
  • "hidden"- скрытый тип поля, который осуществляет передачу данных на сервер. 
  • "submit" – прописывает такой элемент, как кнопки.
  • size="30" – обозначает длину текста в символах.
  • maxlength="35" – обозначает сколько можно максимально ввести символов в поле.

При входе на любой сайт, вы наблюдаете такую форму, как оставить комментарий. С помощью форм HТМL это все прописывается элементарно.

<form action="name_file" method="post" name="comment form" id="comment form">
<p><input type="text" name="author" id="author" value="" size="30" />
<small>имя</small>
</p>
<p><input type="text" name="e-mail" id="e-mail" value="" size="30" />
<small> mail</small>
</p>
<p><textarea name="comment" id="comment" cols="50" rows="10"> </textarea>
</p>
<p><input name="submit" type="submit" id="submit" value="Отправить" />
</p>
</form>

Пример:

имя

mail

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

  • <form action=” name_file " – определяет адрес url по которому информация отправляется на обработку.
  • id – идентификатор элемента формы.
  • name – используется при отправке формы на сервер,имя формы.
  • <textarea> </textarea> – используется для создания поля формы текста, которые похожи на текстовые поля. Разница между текстовым полем и текстовой области, в том что текстовая область может содержать несколько строк текста.
  • rows – используется для определения количества строк в поле.

Элемент <Select Box>
Также известный как выпадающий список. Является список пунктов, которые имеет один или более элементов, которые могут быть выбраны. Вот как выглядит окно в HTML:

<form action=" name_file " method="post" name="drop_down_box">
<select name="menu" size="1">
<option value="first">1-я позиция</option>
<option selected="selected" value="second">2-я позиция</option>
<option value="third">3-я позиция</option>
</select>
</form>

Пример:

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

  • <select> </select> - является список пунктов, которые могут быть выбраны.
  • size – количество видимых в списке пунктов.
  • <option> </option> – определяет расположение пунктов списка
  • Value – значение текстового поля. Используется при отправке формы на сервер 
  • selected="selected" – выделяет список пунктов.

Элементы <Checkbox> и <button>
Checkbox– это флажки, маленькие квадратные кнопки, которые пользователь вашего HTML документа может нажать на их. 
Button- поле формы кнопка создает кнопку, которая может быть нажата читателем вашего документа HTML
Вотпримерв HTML:

<form name="travel" action=" name_file " method="get">
<input type="checkbox" name="transport" value="airplane" checked="checked" /> Самолет<br /> 
<input type="checkbox" name="transport" value="train" /> Поезд<br /> 
<input type="checkbox" name="transport" value="car" /> Автомобиль<br /> 
<input type="checkbox" name="transport" value="bus" /> Автобус<br /> 
<input type="submit" value="OK" />
<input type="reset" value="Reset" />
</form>

Пример:

Самолет
  Поезд
  Автомобиль
  Автобус
 

Текстовое поле имеет следующие значения :
value значение текстового поля. Используется при отправке формы на сервер
checked="checked" – этот атрибут определяет возможные значения.
"submit" – это кнопка, которая отправляет форму со всеми ее ценностями на сервер
type="reset" – обнуления данных .
value="" – визуальное отображения текста на кнопке.

Элемент <Radio Button> и <file field>
<RadioButton>- Радио кнопки выглядят как флажки, кроме того, что радио-кнопки круглые, радио-кнопки, как правило, появляются в списках, где вы можете выбрать только один из переключателей.
<filefield>-  используется при загрузке файла на сервер.
Вотпримерв HTML:

<form name="male_female" action="" method="post">
Пол:<br />
<input type="radio" name="Sex" value="Мужской" checked="checked" /> М<br />
<input type="radio" name="Sex" value="Женский" /> Ж<br />
Прикрепить файл:<br />
<input name="send_f" type="file" size="30" maxlength="60" /> 
</form>

Пример:

Пол:
М
Ж
Прикрепить файл:
 

Элемент <Image Button>
Отображает интерактивные изображения вместо стандартной кнопки HTML. Вы можете использовать любое изображение в качестве кнопки, но вы должны выбрать тот, который имеет смысл для читателя вашего HTML документа. Вот как выглядит изображение кнопка в HTML:

<input type="image" src="/name_fale">
Чтобы оставить комментарий, необходимо зарегистрироваться

Комментарии

  • Комментарии не найдены

Последние новости

Как создаются сайты по ...

Стоит ли создавать сайты по старинке Как всем ...

Как начать работать в ...

  Работайте и зарабатывайте неплохие деньги в ...

коммерческий хостинг - ...

Выбор коммерческого веб-хостинга Надежность и ...

Выбор бесплатного ...

Выбор веб-хостинга бесплатно Выбор лучшего ...

youtube html- видео в ...

 YouTube Видео в HTML странице  Самый простой ...

Scroll to top