Создание на форме Различных элементов


The Presentation inside:

Slide 0

Создание на форме Различных элементов Тема урока:


Slide 1

Html-формы


Slide 2


Slide 3


Slide 4

План урока: Создание простой формы Флажок (checkbox) Переключатель (radio) Кнопка сброса формы (reset) Выпадающий список (select) Текстовое поле (text) Поле для ввода пароля (password) Многострочное поле ввода текста (textarea) Скрытое текстовое поле Кнопки отправки формы (submit) Кнопка для загрузки файлов (browse) Рамка (fieldset)


Slide 5

Создание простой формы <form method="post" action="../admin/add_story.php">  </form>


Slide 6

Флажок (checkbox) <input name="mycolor" type="checkbox" value="red" checked> Красный(выбран по умолчанию)  <input name="mycolor" type="checkbox" value="blue">Синий  <input name="mycolor" type="checkbox" value="black">Черный  <input name="mycolor" type="checkbox" value="white">Белый


Slide 7

Результат:


Slide 8

Переключатель (radio)   <input name="mycolor" type="radio" value="white"> Белый    <input name="mycolor " type="radio" value="green" checked> Зеленый (выбран по умолчанию)    <input name="mycolor " type="radio" value="blue"> Синий    <input name="mycolor " type="radio" value="red"> Красный    <input name="mycolor " type="radio" value="black"> Черный


Slide 9

Результат:


Slide 10

Кнопка сброса формы (reset) <input type="reset" name="Reset" value="Очистить форму">


Slide 11

Результат:


Slide 12

Выпадающий список (select) <select name="Имя списка" size = “Размер”  multiple>  <option value=”Значение”>Отображаемый  текст в списке</option>  </select>


Slide 13

Результат:


Slide 14

Текстовое поле (text) <input type="text" name="txtName" size="10"  maxlength="5" value="Текст по умолчанию">


Slide 15

Результат:


Slide 16

Поле для ввода пароля (password) <input type="password" name="txtName" size= "10" maxlength="5">


Slide 17

Результат:


Slide 18

Многострочное поле ввода текста (textarea) <textarea name="txtArea" cols="15" rows="10" readonly> Текст, который   изначально будет отображен в многострочном поле ввода и который   нельзя изменять, т.к. указан атрибут readonly </textarea>


Slide 19

Результат:


Slide 20

Скрытое текстовое поле <input name="email" type="hidden" value="[email protected]">


Slide 21

Результат:


Slide 22

Кнопки отправки формы (submit) <input type="Тип" name="Имя кнопки" value="Текст кнопки">


Slide 23

Результат:


Slide 24

Кнопка для загрузки файлов (browse) <form enctype="multipart/form-data" action="upload.php" method="post">   Загрузить файл: <input name="my_file" type="file">    <input type="submit" value="Отправить">  </form>


Slide 25

Результат:


Slide 26

Рамка (fieldset) <fieldset>  <legend>Программное обеспечение(заголовок  рамки)</legend>  Текст, который будет помещен внутри рамки.</fieldset>


Slide 27

Результат:


Slide 28

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


×

HTML:





Ссылка: