Уроки 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>
Как вы могли заметить - для отступа между элементами применяется теги "<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кадным таблицам стилей".
◄ Предыдущий урок | Содержание | Следующий урок ► |