close

Вход

Забыли?

вход по аккаунту

?

Урок 5. Формы

код для вставкиСкачать
Урок 5. Формы
Форма предназначена для подготовки и отправки данных шлюзу CGI. Тег формы записывается в следующем виде: <form action="..." method="..." enctype="..."> ..... </form>
Параметры action, method и enctype рассматривать не будем (будем писать тег без параметров). Внутри формы используется три элемента-тега: input, select, textarea. Input обеспечивает ввод однострочных полей с информацией. Параметры:
type - тип вводимой информации: type=text - задает текстовое поле ввода, размер поля- size. Размер вводимой строки не ограничен, но может ограничиваться атрибутом maxlength. Начальное значение текста задается с помощью атрибута value. Для присвоения имени полю атрибут name. Пример: <input type=text size=45 name=file value=win.com>
type=password -аналогичен text, только вместо символов показывает звездочки. type=checkbox - Отображается в виде помечаемого галочкой квадрата. Для задания имени параметра используется атрибут name, а для задания значения параметра используется value.
Пример: <input type=checkbox name=send value=yes checked> посылать данные.
type=radio - Используется для выбора одного значения из списка нескольких значений. Каждая кнопка в группе должна иметь одинаковое имя, задаваемое параметром name, а также собственное значение, которое задает value. Вы слушаете:<br>
<input type=radio name=music value=rap checked> Rap<br>
<input type=radio name=music value=pop> Pop<br>
<input type=radio name=music value=metall> Metall<br>
<input type=radio name=music value=classic> Classic<br>
type=submit - Создает кнопку, при нажатии на которую данные отправляются обрабатывающему шлюзу. Текст кнопки задается value. Пример: <input type=submit value=SEND>
type=reset - Создает кнопку, которая сбрасывает все значения в форме и устанавливает их по умолчанию.
Не были рассмотрены параметры type=file, image и hidden - применяются редко.
Элемент select - создает меню, из которого можно выбрать один или несколько элементов. Элемент select должен иметь закрывающую метку. Внутри него размещаются элементы option, которые задают значения пунктов меню. Меню, имеющее возможность выбора нескольких элементов, отображается в виде списка, при выборе только одного элемента меню отображается в виде выпадающего. Элемент select имеет следующие атрибуты:
name -указывает имя, которое будет использоваться при передаче. size - устанавливает высоту меню в строках, если оно имеет возможность выбора нескольких элементов. multiple - возможность выбора нескольких элементов меню. Элемент option имеет следующие атрибуты:
selected - данный элемент меню выделяется при загрузке документа, value - значение, передаваемое обработчику формы вместе с атрибутом name. Элемент option может не иметь закрывающей метки. Пример: <select name=color>
<option value=red checked> Red
<option value=green> Green
<option value=blue> Blue
</select>
Тег textarea - создает текстовое поле в форме. Все, что между открывающим и закрывающим тегами, имеет такое же значение, как и параметр value. Этот тег может иметь следующие параметры: name - указывает имя, которое будет использоваться при передаче. rows - устанавливает высоту размера поля для ввода текста в виде количества видимых строк текста. cols - устанавливает количество видимых символов в строке. Если введенный текст не помещается в область, выделенную для ввода, то браузер должен обеспечить прокрутку содержимого. <textarea name=text cols=60 rows=15> Сюда Вы должны вводить текст </textarea>
Задание к уроку
1. Создайте форму согласно предложенному коду:
<html><head><title>анкета для всех</title></head>
<body>
<form>
<font face= "comic sans ms" color="blue" size="+3"><b>поступайте в гимназию №1!</b></font>
<font size="+2" face= "comic sans ms" color="red"><br>
укажите фамилию<br>
<input type="text" value="введите данные"><Br>
укажите имя<br>
<input type="text" value="введите данные"><Br>
укажите отчество<br>
<input type="text" value="введите данные"><Br>
<input type="radio" checked name="age"> до 20 лет<Br>
<input type="radio" name="age"> до 40 лет<Br>
<input type="radio" name="age"> > 40 лет<Br>
<input type="text" value="чем интересуетесь"><Br>
<input type="checkbox"> музыка <Br>
<input type="checkbox"> спорт <Br>
<input type="checkbox"> кино <Br>
<input type="checkbox"> компьтеры <br><br>
<h3 align=center>Автобиография</h3>
Расскажите о себе
<textarea name=text cols=50 rows=12>
Сюда Вы должны вводить текст
</textarea>
Почему Вы все же решили поступать в гимназию?
<select name=answer>
<option value=nado> Родители сказали "Так надо"
<option value=neznaw> Не знаю
<option value=nepomnw> Не помню
<option value=zahotel> Внезапно захотел учиться
</select>
<input type="submit" value="подтвердите данные"><br>
<input type="submit" value="очистить данные">
</form>
</body>
</html>
2. Измените код, установив элементы формы в два ряда, применяя для этого таблицы. Добавьте рисунки и фон.
3. Создайте форму - опрос при приеме на работу
4. Создайте форму - социологический опрос по любым вопросам (выборы, переименование Ильичевска и т.д.). Применяйте рисунки и фоны. Задание на дом
1. Создайте форму - резюме, рассылаемый работодателям. Основные разделы:
a. Краткие данные о себе (фамилия, имя, отчество - текстовые строки, пол - радиокнопки, год рождения - текстовое поле, фотография с обтеканием слева, место проживания - текстовое поле)
b. Профессия (выбор из списка профессий)
c. Готовые проекты и работы (текстовое поле)
d. Сфера интересов (выбор из списка)
e. Ваши требования по зарплате (текстовая строка) и социальной защите (выбор из списка - квартира, садик/школа, страховка, медицинское обслуживание)
f. Кнопки отправки и сброса
2. Создайте форму - социологический опрос по любым вопросам (выборы, переименование Ильичевска и т.д.). Применяйте рисунки и фоны. Форму распределяйте по ячейкам таблицы.
Автор
sob-mk
sob-mk146   документов Отправить письмо
Документ
Категория
Методические пособия
Просмотров
123
Размер файла
28 Кб
Теги
урок, формы
1/--страниц
Пожаловаться на содержимое документа