Вход/Регистрация
HTML, XHTML и CSS на 100%
вернуться

Квинт Игорь

Шрифт:

Для флажков можно использовать атрибут checked, который здесь можно установить для нескольких пунктов.

В листинге 6.11 приведен пример создания опроса с флажками. Заданы несколько выбранных по умолчанию вариантов ответа.

Листинг 6.11. Создание флажков

<html>

<head>

<title>Конструирование форм</title>

</head>

<body>

<form action="test.php" enctype="multipart/form-data" method="post" name="test" target="_blank">

Увлечения: <input name="Reg_hobby[]" type="checkbox" value="sing" />Петь

<input name="Reg_hobby[]" type="checkbox" value="float" />Плавать

<input name="Reg_hobby[]" type="checkbox" value="walk" />Гулять

<input name="Reg_hobby[]" type="checkbox" value="work" checked />Работать<br />

<input name="Reg_hobby[]" type="checkbox" value="drive" checked />Кататься на машине

<input name="Reg_hobby[]" type="checkbox" value="cook" />Готовить

<input name="Reg_hobby[]" type="checkbox" value="dance" />Танцевать

<input name="Reg_hobby[]" type="checkbox" value="read" checked /> Читать<br />

</form>

</body>

</html>

Результат обработки браузером кода из листинга 6.11 приведен на рис. 6.5.

Рис. 6.5. Флажки

Теперь у вас достаточно данных о посетителе. Можно дать ему возможность отправить вам свое фото.

Поле для ввода файла

Возможность отправлять файлы на сервер очень помогает в работе. Посетители могут загрузить свои фотографии, рисунки или видео. Это помогает создателю сайта взаимодействовать с посетителями, а посетителям взаимодействовать друг с другом.

Для создания поля отправки файла надо установить значение атрибута type= «file». Особенность этого поля в том, что справа появляется кнопка, при нажатии которой пользователь сможет выбрать загружаемый файл через Проводник, что гораздо удобнее, чем вводить путь до файла вручную.

Вместе с этим полем можно использовать атрибут size, что весьма актуально. При длинном пути к файлу посетителю удобнее видеть весь адрес целиком, поэтому длину строки можно установить достаточно большой.

В листинге 6.12 показан пример создания поля размером 35 символов для ввода файла.

Листинг 6.12. Создание поля для загрузки файла

<html>

<head>

<title>Конструирование форм</title>

</head>

<body>

<form action="test.php" enctype="multipart/form-data" method="post" name= "test" target="_blank">

Добавьте свое фото: <input name="Reg_foto" type="file" size="55" /><br/>

</form>

</body>

</html>

Результат обработки кода из листинга 6.12 показан на рис. 6.6 – создано поле выбора и отправки файла.

Рис. 6.6. Поле для выбора файла

У вас уже достаточно полная форма, теперь можно подумать о том, как сделать ее красочнее.

Создание картинок

С помощью картинок можно украсить форму. Их можно использовать в качестве кнопок. Для задания кнопки-картинки указываем type="image". При этом необходимо задать атрибут src. Его значение – адрес картинки на сервере.

Получается очень симпатичный вид формы, но надо следить за размером картинки, чтобы графические кнопки не оказались больше самой формы.

Для полей картинок можно использовать атрибут alt, который задает альтернативный текст, всплывающий при наведении указателя мыши на изображение. Обязательно используйте этот атрибут, потому что, если у посетителя отключена загрузка картинок, это будет единственная возможность сообщить ему, куда надо нажать для отправки формы.

Можно задать положение картинки на странице относительно текста с помощью атрибута align. Множество значений этого атрибута позволит вам выровнять изображение как угодно.

  • Читать дальше
  • 1
  • ...
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • ...

Ебукер (ebooker) – онлайн-библиотека на русском языке. Книги доступны онлайн, без утомительной регистрации. Огромный выбор и удобный дизайн, позволяющий читать без проблем. Добавляйте сайт в закладки! Все произведения загружаются пользователями: если считаете, что ваши авторские права нарушены – используйте форму обратной связи.

Полезные ссылки

  • Моя полка

Контакты

  • chitat.ebooker@gmail.com

Подпишитесь на рассылку: