Формы
Формы - это объекты, делающие Интернет интерактивным. Именно через формы посетитель общается с сервером. Через ссылки тоже можно общаться с сервером, но, в отличии от форм, пути в ссылках достаточно жестко прописаны - иди, куда послали. Ну и, естественно, без форм ни ввести текст, ни организовать поиск на сайте, ни ... в общем много того, что без форм - ни-ни. Форма добавляется на страницу тэгами:
<form name=form1></form>
Каждая форма на странице должна иметь уникальное имя name, которое лучше записывать латинскими буквами. В примере имя формы form1. Между тэгами формы располагается ее содержимое. Это объекты input разных типов и textarea. Например input в такой записи
<input type=button onClick='func()' value='Жмем!'>
будет выглядеть как кнопка, на которой написано (value=) 'Жмем!' и которая при щелчке мышью вызовет функцию func(). Код примера с кнопкой:
<HTML>
<head>
<script>
function func(){
document.write('Кнопка в форме нажата.');
}
</script>
</head>
<body>
<form name=form1><input type=button onClick='func()' value='Жмем!'></form>
</body>
</HTML>
Пробуем. Для ввода строки текста используется
<input type=text name=txt value=''>
в котором назначение name такое же, как и для формы, а value='' - показывает содержимое строки, когда она первый раз появляется на экране. Что-то вроде этого:
<HTML>
<head>
<script>
function func(){
document.write('<body bgcolor=#0fafff><font size=+3>'+document.form1.txt.value);
}
</script>
</head>
<body>
<form name=form1><input type=text name=txt value=''><input type=button onClick='func()' value='Жмем!'></form>
</body>
</HTML>
Напишем что-нибудь в строке ввода и попробуем. Если вводимый текст большой, то используют многострочное поле ввода textarea:
<textarea name=txt cols=12 rows=7></textarea>
которое, как и форма обязательно должно иметь закрывающий тэг. С помощью cols=12 rows=7 задаются размеры текстового поля - 12 колонок и 7 строк. Пример:
<HTML>
<head>
<script>
function func(){
document.write('<font size=+3>'+document.form1.txt.value);
}
</script>
</head>
<body>
<form name=form1><textarea name=txt cols=12 rows=7></textarea><input type=button onClick='func()' value='Жмем!'></form>
</body>
</HTML>
Запустим, введем в поле текст и нажмем на кнопку. В текстовое поле можно не только вводить, но и выводить текст. Для этого организуем второе текстовое поле:
<HTML>
<head>
<script>
function func(){
document.form2.txt1.value=document.form1.txt.value;
}
</script>
</head>
<body>
<form name=form1><textarea name=txt cols=12 rows=7></textarea><BR><input type=button onClick='func()' value='Жмем!'></form><BR>
<form name=form2><textarea name=txt1 cols=16 rows=4></textarea></form>
</body>
</HTML>
Пробуем вводить в верхнее поле текст и нажимать на кнопку. Работает? У текстового поля есть особенности - оно не понимает многие HTML-тэги, поэтому изменить внешний шрифта, фона можно только через таблицу стилей. Пример на изменение фона:
<HTML>
<head>
<style>
textarea{background:#afdfff;font:14pt;}
</style>
<script>
function func(){
document.form2.txt1.value=document.form1.txt.value;
}
</script>
</head>
<body>
<form name=form1><textarea name=txt cols=12 rows=7></textarea><BR><input type=button onClick='func()' value='Жмем!'></form><BR>
<form name=form2><textarea name=txt1 cols=16 rows=4></textarea></form>
</body>
</HTML>
И - результат. Цвет поменяли оба поля. Чтобы раскрасить их в разные цвета нужно отнести эти поля к разным классам (или дать каждому свое имя в таблице стилей). Таким же способом можно поменять и шрифт на кнопке. Код примера:
<HTML>
<head>
<style>
textarea{background:#afdfff;
font:14pt;}
.out{background:#fafc00;}
input{font:16pt;
color:#ff0f0f;}
</style>
<script>
function func(){
document.form2.txt1.value=document.form1.txt.value;
}
</script>
</head>
<body>
<form name=form1><textarea name=txt cols=12 rows=7></textarea><BR><input type=button onClick='func()' value='Жмем!'></form><BR>
<form name=form2><textarea class=out name=txt1 cols=16 rows=4></textarea></form>
</body>
</HTML>
и сам пример. Короче, поле для экспериментов - необъятное.