WEB_LW_3_4 / 3_2 html-forms

Email, tel, url

<label for="email">Email</label>

<input id="email" name="email" type="email">

<label for="website">Веб-сайт</label>

<input id="website" name="website" type="url">

<label for="phone">Телефон</label>

<input id="phone" name="phone" type="tel">

31

search

<form>

<input name="qry" type="search"> <input type="submit" value="Найти"> </form>

32

LIST

<form action="demo_form.asp" method="get">

<input list="browsers" name="browser">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome"> <option value="Opera">

<option value="Safari">

</datalist>

<input type="submit"></form>

33

Структурирование формы

Элементы <FIELDSET> и <LEGEND> применяются для группировки элементов управления внутри формы.

Группирование элементов управления позволяет:

•Разделить форму на участки

•Улучшить понимание разделов формы

•Сделать удобнее навигацию

Атрибут tabindex определяет позицию элемента в порядке табуляции в текущем документе.

Поддерживается элементами: <A>, <AREA>, <BUTTON>, <INPUT>, <OBJECT>, <SELECT> и <TEXTAREA>.

34

Структурирование формы

<FORM action="..." method="post"> <FIELDSET>

<LEGEND>Персональная информация</LEGEND>

Фамилия: <INPUT name="personal_lastname" type="text" tabindex="1"/> Имя: <INPUT name="personal_firstname" type="text" tabindex="2"/> Адрес: <INPUT name="personal_address" type="text" tabindex="3"/>

...другая информация...

</FIELDSET>

<FIELDSET>

<LEGEND>История болезни</LEGEND>

<INPUT name="history_illness" type="checkbox" value="Smallpox" tabindex="20"/> Оспа <INPUT name="history_illness" type="checkbox" value="Mumps" tabindex="21"/> Свинка

<INPUT name="history_illness" type="checkbox" value="Dizziness" tabindex="22"/> Головокружение <INPUT name="history_illness" type="checkbox" value="Sneezing" tabindex="23"/> Кашель </FIELDSET>

</FORM>

35

Не полностью поддерживаемые

<input name='range' type='range' min='1' max='5' />

<input name='color' type='color' />

<input type='date' />

<input type="number" min="0" max="10” step="2” value="6">

36