26.02.2012, 20:51

Делаем формы в html


В этом уроке я научу вас делать формы : входа , добавления комментариев , выпадающего списка , списка с прокруткой .

Начнём с формы входа.
Тут нам понадобятся команды :
<form> </form> - создаёт форму
name="" - задаёт имя форме
method="" - отправляет данные . Для неё существуют подкоманды : "post"- передаёт больше данных , "get" - меньше данных ( по умолчанию ).
action="" - между кавычек нужно вставлять url по которому отправляются данные
<input /> - создаёт кнопки , переключатели и поля для ввода
type="text" - создаёт поле для ввода
type="password" - создаёт поле для ввода пароля
type="checkbox" - создаёт переключатель
type="submit" - создаёт кнопку
type="hidden" - создаёт скрытый элемент для передачи дополнительной информации
size="25" - задаёт длину поля
maxlength="30" - задаёт максимальное количество символов , которые можно ввести
value="" - определяет значение , которое относится относится к переключателям
Теперь научимся применять это огромное количество команд . Вот один из примеров их применения :
Code
<form name="f1" method="get" action="enter_data.php">
<input name="link" type="hidden" value="index.php" />
Логин: <br />
<input name="login" type="text" size="25" maxlength="30" value="Тут поле для логина" /> <br />
Пароль: <br />
<input name="pd" type="password" size="25" maxlength="30" value="" /> <br />
<input name="remember" type="checkbox" value="yes" /> Запомнить <br />
<input type="submit" name="enter" value="Вход" />
</form>

Вот что получится :

Теперь вы умеете создавать форму входа.

Теперь научимся создавать форму добавления комментариев
Появляются новые команда :
id="" - определяет уникальность имени
<textarea> </textarea> - определяет поле для ввода текста
cols="" - создаёт определённое количество колонок поля ввода
rows="" - создаёт определённо количество рядов поля ввода
Теперь попробуем использовать то , что мы узнали :
Code
<form action="http://ab-w.net/comments.php" method="post" name="commentform" id="commentform">
<p><input type="text" name="author" id="author" value="" size="25" />
<small> Ник</small>
</p>
<p><input type="text" name="email" id="email" value="" size="25" />
<small> Mail</small>
</p>
<p><textarea name="comment" id="comment" cols="48" rows="8"> </textarea>
</p>
<p><input name="submit" type="submit" id="submit" value="Отправить" />
</p>
</form>

Вот как это выглядит :

Теперь вы умеете создавать такую форму.

Следующее чему я вас научу - это выпадающий список .
Тут появляются команды :
<select> </select> - создаёт выпадающий список
size="" - создаёт видимый пункт выпадающего меню
<option> </option> - создаёт пункт списка
value="" - значение которое будет отправлено
selected="selected" - определяет пункт списка в качестве примера
multiple="multiple" - даёт возможность выбирать несколько пунктов
Теперь научимся создавать выпадающее меню :
Code
<form action="http://ab-w.net/info.php" method="post" name="drop_down_box">
<select name="menu" size="1">
<option value="first">Первый пункт</option>
<option selected="selected" value="second">Второй пункт</option>
<option value="third">Третий пункт</option>
<option value="fourth">Четвертый пункт</option>
</select>
</form>

Вот как это выглядит :

К сожалению скриншот с открывшимся меню не получился sad
Если увеличить значение size="" , то появится полоса прокрутки :

Таки образом у нас получился уже список с прокруткой

Подводим итоги :
Из этого урока мы узнали как делать форму входа , добавления комментариев , выпадающего списка и списка с прокруткой .

Спасибо за внимание !!!

Источник/Автор: http://portal-naruto.ru

Категория: HTML, CSS, JS, JQ | Добавил: Silver (26.02.2012) Просмотров: 2449 | Рейтинг: 4.3/3
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]