2015-05-13
419
<HTML>
<HEAD>
<TITLE>Данные из формы типа checkbox. Переводчики</TITLE>
<script language="JavaScript">
<!—- //
function grant()
{ var d= document
var k=0;
if (d.all("1").checked) k+=Number(d.all("1").value)
if (d.all("2").checked) k+=Number(d.all("2").value)
if (d.all("3").checked) k+=Number(d.all("3").value)
if (d.all("4").checked) k+=Number(d.all("4").value)
if (d.all("5").checked) k+=Number(d.all("5").value)
if (d.all("6").checked) k+=Number(d.all("6").value)
form1.res.value="Baм полагается вознаграждение "+k+ " y.e."
}
//-->
</script>
</HEAD>
<BODY>
<Н3>Анкета для переводчиков </Н3>
Укажите те языки, которыми Вы владеете в совершенстве: <br>
<FORM name="form1">
<input type="checkbox" name="lan" value=100 13="1">русский<br>
<input type="checkbox" name="lan" value=200 1й="2">английский<br>
<input type="checkbox" name="lan" value=300 id="3">фpaнцyзcкий<br>
<input type="checkbox" name="lan" value=400 id="4">немецкий<br>
<input type="checkbox" name="lan" value=500 id="5">китaйcкий<br>
<input type="checkbox" name="lan" value=600 id="6">японский<hr>
<input type="button" value=Вознаграждение onClick="grant()">
<input type="text" size=45 name="res"><HR>
<input type="reset" value="Отменить">
</FORM>
</BODY>
</HTML>
Списки
· Использование списка в задаче оформления заказа на витражи
· Использование списка в анекте переводчика
· Обработка анкеты переводчика
· Анкета читателя
· Обработка анкеты читателя
· Выбор изображения из списка
· Изменение свойств горизонтальной линии
· Анкета "Преподаватель и студент"
· Тест "Города и памятники"
· Цветовое оформление таблицы и ячеек
· Выравнивание изображений
· Упражнения
Если элементов много, то представление их с помощью флажков или переключателей увеличивает размер формы. В этом случае варианты выбора могут быть представлены в окне браузера более компактно с помощью тега <seiect>. Напомним, что тег имеет несколько параметров. Параметр name является обязательным. Для того чтобы установить число одновременно видимых элементов, следует задать параметр size=n. Когда п равно 1, то отображается ниспадающее меню или список выбора; при п>1 выводится список с п одновременно видимыми значениями. Если параметр size не задан, то по умолчанию принимается значение равное 1. Указание параметра multiple означает, что из меню или списка можно выбрать несколько элементов. Элементы меню задаются внутри тега <seiect> с помощью тега <option>. Общий вид тега таков:
<option selected value=строка>
Параметр selected означает, что данный элемент списка считается выбранным по умолчанию. Параметр value содержит значение, которое передается, если данный элемент выбран из списка или меню.
Использование списка в задаче оформления заказа на витражи
Вернемся к задаче оформления заказа на витражи. В предыдущей версии форма витража задавалась с помощью переключателей. Теперь воспользуемся тегом <select>.
<BODY>
<FORM name="form1">
Выберите форму витража<br>
<select name="list" size=1>
<option value=0>прямоугольник
<option value=l>квадрат
<option value=2>Tтреугольник
<option value=3>Kpyr
</select>
<input type="button" value="Проверить" onClick="testse1()">
<input type="reset" value="Отменить">
</FORM>
</BODY>
Выбрать форму витража можно с помощью ниспадающего меню. В приведенном выше коде форма содержит три элемента управления. Первый определяется тегом <seiect>, следующие два элемента представляют собой кнопки Проверить и Отменить.
Для того чтобы осуществить доступ к первому элементу формы (списку), следует воспользоваться одной из следующих конструкций
document.form1.list
document.form1.elements[0]
document.forms ["form1"].elements[0]
document.forms[0].elements[0]
Список обладает свойствами length и name. В рассматриваемом примере значение document.form1.list.length равно четырем, а значение document.forml.list.name равноlist.
Свойства selected и value связаны с текущим выбором элемента из списка. Свойство selected возвращает значение true, если элемент выбран, и false — в противном случае. В рассматриваемом варианте кода если выбран первый элемент (прямоугольник), то значение ((document.forms["form1"].elements[0])[0].selected станет равным true. Для анализа следующих трех элементов списка следует определить значения:
document.forms["form1"].elements[0])[1].selected
document.forms["form1"].elements[0])[2].selected
document.forms["form1"].elements[0])[3].selected
Свойство value возвращает значение параметра value, определенного в теге <option>. Значение ((d.forms["forml"].elements[0])[0]).value равно нулю. Свойство text возвращает текст, записанный после тега <option> в объекте select. Так значением ((d.forms["form1"].elements[0])[0]).text является строковый литерал "прямоугольник".
Функция testsel() играет роль тестиреумой программы и проверяет, правильно ли выбираются параметры. Полностью документ со сценарием будет выглядеть так, как представлено в листинге 6.1.
