WEB_LW_3_4 / 3_2 html-forms

Другие атрибуты тега input :

id value

readonly Disabled

Элементы формы располагаются браузером в едином потоке вывода. Для того, чтобы расположить элемент с новой строки помещаем его в параграф <p> или используем тег <BR>

11

Text input

<label>A text field:

<input type="text" name="textfield" value="with an initial value" /> </label>

<label>A multi-line text field

<textarea name="textarea" cols="24" rows="2">Hello</textarea> </label>

<label>A password field:

<input type="password" name="textfield3" value="secret" /> </label>

12

Buttons

 Кнопка для отсылки данных на сервер «SUBMIT»:

<input type="submit" name="Submit" value="Submit" /><BR />

Кнопка для сброса полей ввода в значение по умолчанию «RESET»: <input type="reset" name="Submit2" value="Reset" /><BR />

Кнопка обработки события «BUTTON»:

<input type="button" name="Submit3" value="Push Me" /><BR />

* В отличии от элемента Input может иметь содержимое.

13

 <BUTTON name="submit" value="submit" type="submit"> Send<IMG src="/icons/wow.gif" alt="wow"></BUTTON>

14

Radio buttons

Radio buttons:<br>

<input type="radio" name="radiobutton" value="myValue1" /> male<br>

<input type="radio" name="radiobutton" value="myValue2” checked="checked" />female

Для создания группы радио кнопок нужно задать нескольким элементам одинаковое значение атрибута name.

При передаче данных форма передаст NAME=VALUE того элемента который был выбран.

15

Checkboxes

 A checkbox:

<input type="checkbox" name="checkbox" value="checkbox" checked="checked">

type: "checkbox"

name: used to reference this form element from JavaScript

value: возвращаемое значение, если элемент выбран

16

Hidden fields

<input type="hidden" name="hiddenField" value="nyah">

Поля данного типа не отображаются браузером и не дают пользователю изменять присвоенные данному полю по умолчанию значение.

17

Labels

label – это не элемент управления

Элемент LABEL может использоваться для присоединения информации к элементу управления.

Поместив управляющий элемент в контейнер <label>..</label>

<label><input type="radio" name="gender" value="m" />male </label>

 Использовав для связи атрибут for

<label for="lname">Last Name:</label>

<input type="text" name="lastname" id="lname" />

18

Пример

19

Пример

<FORM action="Input_example" method="post">

<LABEL>Имя:<INPUT type="text" name="firstname"></LABEL><BR>

<LABEL>Фамилия:<INPUT type="text" name="lastname"></LABEL><BR>

<LABEL>Пол:

<INPUT type="radio" name="sex" value="Male"> Male<BR>

<INPUT type="radio" name="sex" value="Female"> Female<BR>

</LABEL>

<LABEL>Высшее образование: <INPUT type="checkbox" Checked value="1" name="ex"> </LABEL><BR>

<label>Нажми кнопку:<INPUT type="image" src="pictures.png" name"pict"><BR>

<LABEL>Введите пароль:<INPUT TYPE="password" NAME="pwdl" SIZE="20"></LABEL><BR>

<INPUT TYPE="hidden" NAME="hide" value="Скрітая информация"><BR>

<INPUT type="submit">

<INPUT type="reset">

</FORM>

20