Формы HTML для сайтов

Вернуться на главную
Стихи
Флеш-игры


Элементы форм - нерабочие кнопочки

В таблице приведены не сами формы, а лишь их внешний вид. Чтобы кнопки работали, их надо заключить в ТЭГ <form>здесь тэги, описывающие вид формы </form> и добавить metod (метод обработки) action(программа обработки)

Типы форм HTML и тэг <input>

checkbox / чекбокс /место для галочки
radiobutton / радиокнопка/ кнопка-переключатель
text /текстовое поле
button ( submit, reset) / кнопка (кнопка подтверждения, кнопка сброса)
textarea/место для текста (текстовое поле с возможной прокруткой)
fieldset

Тип/type Пишется так Выглядит так
Чекбокс / checkbox <input type="checkbox">
Pадиокнопка/ radio <input type="radio">

Текстовое поле/ text field

<input type="text">
Кнопки:простая кнопка, кнопка подтверждения, кнопка сброса <input type="button">
<input type="submit">
<input type="reset">


Кнопка-картинка/image

<input type="image" src="img/knopka.png">
Обзор файлов для выбора / file <input type="file">
Текстовое поле с возможной прокруткой/ textarea <textarea></textarea>
Обрамленное поле для информации / fieldset <fieldset> текст </fieldset>
текст
Выбор/ select <select>
<option>первый</option>
<option>второй</option>
<option>третий</option>
</select>
     

Тэг <LABLE> </LABLE>

Lable - ярлык, надпись, которая сопровождает форму. Тэг LABLE размещается посредине, между тэгом FORM и тэгом, определяющим внешний вид формы. По принципу матрешки

Примеры тэга LABLE

Тип/type Пишется так Выглядит так
Чекбокс с лейблом <label><input type="checkbox"> Поставьте галочку</label>
  <label>Поставьте галочку <input type="checkbox">
</label>

Радиокнопка с лейблом

<label><input type="radio">
Ваш выбор</label>
  <label> Ваш выбор <input type="radio">
</label>

Кнопка-картинка с картинкой и лейбл
<label><input name="image" type="image" src="img/knopka.png"> кнопка</label>
Обзор файлов для выбора с лейблом <label>выбрать<input type="file"></label>
Аналогично для остальных форм    

 

Примеры тэга FORM


Вид формы Пишется так Выглядит так
Форма
метод GET
действие - переход по указанному адресу http
в новом окне (blank)
<form method="get"
action=
"http://inet4you.info/game_05.shtml" target ="blank" >
<label>кнопка-ссылка
<input type="Submit" value="Играть в шарики">
</label>
</form>
Форма
метод POST
действие - выполение действий прописанных в файле mail.php

в данном случае письмо не уйдет

<form method="post"
action="mail.php">

<strong>Ваше имя:</strong><br />
<input type="text" name="name" size="25"/>
<br />
<strong>Ваше сообщение:</strong><br />
<textarea name="mess" rows="3" cols="25"></textarea>
<p>
<input type="submit" value="Отправить сообщение"/>
</p>
</form>

Ваше имя:

Ваше сообщение:

Существует 2 метода обработки форм: GET и POST
Но это уже совсем другой уровень знаний. А здесь всего лишь АзБука, даже не Букварь



.