Генератор цветов Уроки C++ Уроки Windows forms Учебники по программированию Уроки HTML Уроки CSS Готовые задания Исходники Полезные программы
регистрация доменов

Дешёвые домены



Уроки HTML


Формы html

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


Простое текстовое поле (логин; пароль) html
<input name="login" type="text" size="20" maxlength="32" value="Логин" /> 



size="" - устанавливает размер (длину) поля;
maxlength="" – определяет, сколько максимум символов может быть записано в текстовом поле;
name="" – нужен для PHP – обработчика формы (для файла .php);


Помимо стандартных параметров, полю можно задать цвет заднего фона, цвет текста и цвет рамки. В следующем примере показано применение всех этих свойств сразу.

<input name="login" type="text" size="28" maxlength="49" 
style=" background-color: #FBFAC8; color: #FF9F4B; border: 2px solid #85F659;"
 value="Write something" />

Но лучше все стилевые атрибуты задавать с помощью CSS.


Так же существует специальное поле для ввода пароля (type="password"):
Всё что, вы в него введёте будет сразу же заменяться на точки.

<input name="pass" type="password" size="24" maxlength="32" value="" />


Простое текстовое поле (логин; пароль) html

Для стиля кнопки, как и текстового поля можно задать некоторые параметры.
Ниже продемонстрированы некоторые из них:

<input name="enter" type="submit" value="OK" />
<input name="enter" type="submit" style="color: Blue" value="Ввод" />
<input name="enter" type="submit" style="background: #B0CE3A; color: White" value="Назад" />


Текстовое поле html
<textarea name="txtpole" id="txtpole" cols="36" rows="10"> </textarea>

(Некоторые браузеры позволяют произвольно растягивать текстовое поле мышкой)
cols="" – количество колонок;
rows="" – количество рядов.
id="" – определяет идентификатор элемента формы.


Выпадающий список html

Список определяется тегами <select> </select>

size="" – определяeт количество видимых позиций списка. Если "1", то будет выпадающий список.

<select name="spisok" size="1">
<option value="first">Первый пункт</option>
<option value="second">Второй пункт</option>
<option selected="selected" value="third">Третий пункт</option>
<option value="fourth">Четвертый пункт</option>
<option value="fifth">Пятый пункт</option>
</select>

<option> </option> – определяют пункты списка.
value="" – содержит значение, которое будет отправлено формой на обработку.
selected="selected" – выделяет позицию списка в качестве стартовой.


Список с прокруткой html

Что бы у списка появилась полоса прокрутки нужно сделать значение атрибута size="" больше чем "1"

<select name="menu" size="4">
<option value="first">Первый пункт</option>
<option value="second">Второй пункт</option>
<option selected="selected" value="third">Третий пункт</option>
<option value="fourth">Четвертый пункт</option>
<option value="fifth">Пятый пункт</option>
<option value="sixth">Шестой пункт</option>
<option value="seventh">Седьмой пункт</option>
<option value="eighth">Восьмой пункт</option>
</select>



Переключатели (чекбокс) html

Что бы переключатели (галочки) и кнопки были взаимосвязаны – нужно заключить их все
в теги <form> </form>

Внутри первого тега в action="" указывается ссылка на файл-обработчик; в method="" название метода. Пока просто рассмотрим общее функционирование элементов.

<form name="color" action="" method="">
<input type="checkbox" name="color" value="white"/> Белый<br />
<input type="checkbox" name="color" value="green" checked="checked" /> Зелёный<br />
<input type="checkbox" name="color" value="orange" /> Оранжевый<br />
<input type="checkbox" name="color" value="red" /> Красный<br />
<input type="checkbox" name="color" value="black" /> Чёрный <br />
<input type="submit" value="OK" />
<input type="reset" value="Reset" />
</form>

Белый
Зелёный
Оранжевый
Красный
Чёрный



Переключатели (радиоботон) html

Суть та же, что и с "чекбоксами", только в этом случае из всех переключателей можно выбрать только один.

<form name="ask" action="" method="">
<input type="radio" name="ask" value="Да" checked="checked" /> Да<br />
<input type="radio" name="ask" value="Нет" /> Нет<br />
<input type="radio" name="ask" value="Незнаю" /> Не знаю<br />
</form>

Да
Нет
Не знаю



Прикрепление файла html

Существует такая "волшебная" (как покажется некоторым) кнопка, нажав на которую откроется проводник для выбора конкретного файла или файлов.

<input type="file" name="load_file" size="32" maxlength="64" />



Теперь рассмотрим несколько простых примеров "комплексных" форм:


Вход в личный кабинет html
<form name="log" action="" method=""  id="">
Логин: <br />
<input  type="text" name="login" size="20" maxlength="32" value="" /> <br />
Пароль: <br />
<input  type="password" name="pass" size="20" maxlength="32" value="" /> <br />
<input  type="checkbox" name="remember" value="yes" /> Запомнить <br />
<input type="submit" name="enter" value="Вход" />
</form>

Логин:

Пароль:

Запомнить



Оставить комментарий html

Вы увидите в коде такой элемент, как type="hidden" – он определяет скрытый элемент формы, через который передаётся дополнительная информация на сервер.

<form name="log" action="" method="" id="">
<input type="hidden" name="link" value="page.php" />
<p><input type="text" name="Name" id="Name" size="20" value=""/>
<small> Имя</small>
</p>
<p><input type="text" name="email" id="email" size="20" value=""/>
<small> E-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>

Имя

E-mail


Как вы могли заметить - для отступа между элементами применяется теги "<p> </p>". Это конечно же не совсем профессионально, но зато просто. Работа со стилями и формами подробно рассматривается в этом уроке по CSS.


Простая анкета html

В коде данного примера будут применены теги " <fieldset> </fieldset>" – эти теги рисуют рамку вокруг всей большой формы. А между тегов "<legend> </legend>" пишется название рамки.

<form name=" " action="" method="" id="">
<fieldset>
<legend>
Анкета
</legend>
<p><input type="text" size="20" /> <small>Фамилия</small></p>
<p><input type="text" size="20" /> <small>Имя</small></p>
 <p><small>Город</small></p>
<p> <select name="city" size="1">
<option value="first" value="third" selected="selected">Москва</option>
<option value="second">Санкт-Петербург</option>
<option value="third">Самара</option>
<option value="fourth">Екатеринбург</option>
<option value="fifth">Астрахань</option>
</select></p>
<p><input type="text" size="20" /> <small>Год рождения</small></p>
<p><input type="text" size="20" /> <small>E-mail</small></p>
<input type="radio" name="Sex" value="Мужской" /> <small>М</small><br>
<input type="radio" name="Sex" value="Женский" /> <small>Ж</small><br>
<p><small>О себе</small><br>
<textarea name="about" id="about" cols="52" rows="16"> </textarea></p>
<p><input type="submit" value="Отправить" />
</fieldset>
</form>

Посмотреть результат

Информации изложенной в этом уроке хватит для формирогвания общего представления о веб-формах, но для того что бы сделать что то серьёзное вам нужно изучить этот урок по CSS, в котором подробно рассмотрено создание стилей для форм. Но если вы незнакомы с CSS то лучше изучить по пjрядку все уроки по "Каcкадным таблицам стилей".



◄ Предыдущий урок Содержание Следующий урок ►