Таблица 2. Атрибуты тега
Атрибут
Значение / описание
disabled
Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера , отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без указания значения — .
form
name
Определяет имя
, которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута id .
3. Создание полей формы
Элемент создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.
С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение . Ширина поля задается свойством width .
Таблица 3. Атрибуты тега
Атрибут
Значение / описание
accept
Определяет тип файла, разрешенных для отправки на сервер. Указывается только для . Возможные значения :
file_extension — разрешает загрузку файлов с указанным расширением, например, accept=".gif" , accept=".pdf" , accept=".doc"
audio/* — разрешает загрузку аудиофайлов
video/* — разрешает загрузку видеофайлов
image/* — разрешает загрузку изображений
media_type — указывает на медиа-тип загружаемых файлов.
alt
Определяет альтернативный текст
для изображений, указывается только для .
autocomplete
Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе:
on — означает, что поле не защищено, и его значение можно сохранять и извлекать,
off — отключает автозаполнение для полей форм.
autofocus
Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения.
checked
Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio" .
disabled
form
Значение атрибута должно быть равно атрибуту id элемента
formaction
Задает url файла , который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа type="submit" и type="image" . Атрибут переопределяет значение атрибута action самой формы.
formenctype
Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута enctype формы. Задается только для полей типа type="submit" и type="image" . Варианты:
application/-x-www-form-urlencoded — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ + , специальные символы преобразуются в значения ASCII HEX)
multipart/form-data — символы не кодируются
text/plain — пробелы заменяются на символ + , а специальные символы не кодируются.
formmethod
Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута method формы. Варианты:
get — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер: URL?имя=значение&имя=значение
post — данные формы отправляются в виде http-запроса.
formnovalidate
Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута novalidate формы. Можно использовать без указания значения атрибута.
formtarget
Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута target формы.
_parent – загружает ответ в родительский фрейм
_top – загружает ответ во весь экран
framename – загружает ответ во фрейм с указанным именем.
height
Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type="image" , например, . Рекомендуется одновременно устанавливать как высоту, так и ширину поля.
list
Является ссылкой на элемент , содержит его id .Позволяет предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле.
max
Позволяет ограничить допустимый ввод числовых данных максимальным значением , значение атрибута может содержать целое или дробное число . Рекомендуется использовать этот атрибут вместе с атрибутом min . Работает со следующими типами полей: number , range , date , datetime , datetime-local , month , time и week .
maxlength
Атрибут задает максимальное количество символов, вводимых в поле. Значение по умолчанию 524288 символов.
min
Позволяет ограничить допустимый ввод числовых данных минимальным значением.
multiple
Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута.
name
Определяет имя, которое будет использоваться для доступа к элементу
pattern
Позволяет определять с помощью регулярного выражения
синтаксис данных, ввод которых должен быть разрешен в определенном поле. Например, pattern="{3}-{3}" — квадратные скобки устанавливают диапазон допустимых символов, в данном случае — любые строчные буквы , число в фигурных скобках указывает, что нужны три строчные буквы, после которых следует тире, далее — три цифры в диапазоне от 0 до 9.
placeholder
Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка).
readonly
Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута.
required
Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута.
size
Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: text , search , tel , url , email и password .
src
Задает url изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля .
step
Используется для элементов, предполагающих ввод числовых значений , указывает величину увеличения или уменьшения значений в процессе регулировки диапазона (шаг).
type
button — создает кнопку.
checkbox — превращает поле ввода во флажок, который можно установить или очистить, например, У меня есть автомобиль
color — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате.
date — позволяет вводить дату в формате дд.мм.гггг.
День рождения:
datetime-local — позволяет вводить дату и время, разделенные прописной английской буквой Т по шаблону дд.мм.гггг чч:мм.
День рождения — день и время:
email — браузеры, поддерживающие данный атрибут , будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты.
E-mail:
file — позволяет загружать файлы с компьютера пользователя.
Выберите файл:
hidden — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию.
image — создает кнопку, позволяя вместо текста на кнопке вставить изображение.
month — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм.
number — предназначено для ввода целочисленных значений. Его атрибуты min , max и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента.
Укажите количество (от 1 до 5):
password — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки.
Введите пароль:
radio — создает переключатель - элемент управления в виде небольшого кружка, который можно включить или выключить.
Вегетарианец:
range — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора
reset — создает кнопку, которая очищает поля формы от введенных пользователем данных.
search — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму.
Поиск:
submit — создает стандартную кнопку , активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки.
text — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста.
time — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.
Укажите время:
url — поле предназначено для указания URL-адресов.
Главная страница:
week — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53.
Укажите неделю:
value
Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file.
width
Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы.
4. Текстовые поля ввода
Элемент используется вместо элемента , когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height . Все размеры считаются исходя из размера одного символа моноширинного шрифта.
5. Раскрывающийся список
Списки дают возможность расположить большое количество пунктов компактно. Раскрывающиеся списки создаются при помощи элемента ... . Они позволяют выбрать одно или несколько значений из предложенного множества. По умолчанию в поле списка отображается его первый элемент.
Для добавления в список пунктов используются элементы ... , которые располагаются внутри .
Для систематизации списков применяется элемент ... , который создает заголовки в списках.
Для списков возможно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение.
Таблица 5. Атрибуты тега
Атрибут
Значение / описание
autofocus
Устанавливает автоматический фокус на элементе при загрузке страницы.
disabled
Отключает раскрывающийся список.
form
Определяет форму, которой принадлежит данный список . В качестве значения атрибута указывается идентификатор формы.
multiple
Дает возможность выбора одного или нескольких пунктов, для этого при выборе нужно нажать и удерживать нажатой клавишу Ctrl .
name
Определяет имя для выпадающего списка. Значение атрибута содержит название, отражающее тематику списка.
required
Выводит сообщение о том, что пользователь должен выбрать значение из раскрывающегося списка перед отправкой формы.
size
Задает количество одновременно видимых на экране элементов списка. Если количество элементов списка превышает установленное количество, появляется полоса прокрутки. Значение атрибута задается целым положительным числом.
6. Надписи к полям формы
Надписи к элементам формы создаются с помощью элемента ... . Существует два способа группировки надписи и поля. Если поле находится внутри элемента , то атрибут for указывать не нужно.
Когда вы последний раз летали на самолете?
Кошка
7. Кнопки
Элемент ... создает кликабельные кнопки. В отличие от кнопок, созданных ( , , , ), внутрь элемента можно поместить контент — текст или изображение.
Для корректного отображения элемента разными браузерами нужно указывать атрибут type , например, .
Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.
Таблица 9. Атрибуты тега
Атрибут
Значение / описание
autofocus
Устанавливает фокус на кнопке при загрузке страницы.
disabled
Отключает кнопку, делая ее некликабельной.
form
Указывает на одну или несколько форм, которым принадлежит данная кнопка. Значение атрибута — идентификатор соответствующей формы.
formaction
Значение атрибута содержит url-адрес обработчика данных формы, отправляемых при нажатии на кнопку. Только для кнопки типа type="submit" . Переопределяет значение атрибута action , указанного для элемента .
formenctype
Задает тип кодировки данных формы перед отправкой на сервер при нажатии на кнопки типа type="submit" . Переопределяет значение атрибута enctype , указанного для элемента . Возможные значения:
application/x-www-form-urlencoded — значение по умолчанию. Все символы перед отправкой будут закодированы.
multipart/form-data — символы не кодируются. Используется в случае, когда с помощью формы загружаются файлы.
text/plain — символы не кодируются, а пробелы заменяются на символ + .
formmethod
Атрибут определяет метод, который браузер будет использовать для отправки формы. Переопределяет значение атрибута method , указанного для элемента . Указывается только для кнопок типа type="submit" . Возможные значения:
get — данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер. Данный способ имеет ограничения по размеру отправляемых данных и не подходит для отправки паролей и конфиденциальной информации.
post — данные из формы добавляются в виде http-запроса. Метод является более надежным и безопасным, чем get и не имеет ограничений по размеру.
formnovalidate
Атрибут задает, что данные формы не должны проверяться при отправке. Указывается только для кнопок типа type="submit" .
formtarget
Атрибут задает, в каком окне выводить результат после отправки формы. Указывается только для кнопок типа type="submit" . Переопределяет значение атрибута target , указанного для элемента .
_blank — загружает ответ в новое окно/вкладку
_self — загружает ответ в то же окно (значение по умолчанию)
_parent — загружает ответ в родительский фрейм
_top — загружает ответ во весь экран
framename — загружает ответ во фрейм с указанным именем.
name
Задает имя кнопки, значение атрибута — текст. Используется для ссылки на данные формы, после того как форма была отправлена, или для ссылки на данную кнопку (кнопки) в JavaScript.
type
Определяет тип кнопки. Возможные значения:
button — кликабельная кнопка
reset — кнопка сброса, возвращает первоначальное значение
submit — кнопка для отправки данных формы.
value
Задает значение по умолчанию, отправляемое при нажатии на кнопку.
8. Флажки и переключатели в формах
Флажки в формах задаются с помощью конструкции , а переключатель — при помощи .
Флажков, в отличие от переключателей, в одной форме может быть установлено несколько. Если для флажков указан атрибут checked , то при загрузке станицы на соответствующих полях формы флажки уже будут установлены.
Элемент применяется при реализации выбора с помощью переключателей и флажков. Можно выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Для этого нужно поместить внутрь элемента .
В функции printf()существует возможность задания вывода
переменных определенного формата, а
именно, можно задавать ширину поля
переменных, определять точность вывода
вещественных переменных, определять
тип выравнивания данных и т.д. В этом
случае спецификации формата записывается
в такой форме:
%[флаг][ширина].[точность]спецификация
где флаг – тип выравнивания (пусто –
выравнивания по правому краю, `–` –
выравнивания по левому краю, `+` – всегда
печатать знак числа);
ширина – общая длина поля вывода, т.е.
общее количество символов при выводе,
включая знак и десятичную точку;
точность – количество цифр числа после
запятой.
Примеры спецификаций формата:
%12.4f
– вывод вещественной переменной с
выравниванием по правому краю, общее
количество символов при выводе –12
позиций, количество знаков после
десятичной точки – 4;
%-+10.0f
– вывод вещественной переменной с
выравниванием по левому краю и обязательным
выводом знака числа, общая длина поля
вывода – 10 позиций, знаки после десятичной
точки не выводятся;
%08d
– вывод целой переменной с
выравниванием по правому краю, ширина
поля – 8 позиций, слева число дополняется
нулями;
%16s
– вывод строки, ширина поля вывода
– 16 позиций.
3.3. Функция форматированного ввода scanf() 3.3.1. Назначение и описание функции Функция позволяет ввести информация с
клавиатуры. Функция определяется в
библиотеке .
Синтаксис:
scanf(<управляющая
строка>, <список адресов переменных>);
где <управляющая
строка> - строка, которая может
содержать только спецификации формата,
перечень допустимых значений спецификаций
тот же самый, что и для функцииprintf()(см. табл. 3.1.);
<список адресов
переменных> – содержит перечисленные
через запятую адреса переменных, вводимых
функцией. Адрес переменной указывается
символом& и
далее идет идентификатор переменной,
например, адрес переменнойflagобозначается символами&flag.
Для массивов и строк указывать символ& не обязательно.
Замечание:
При использовании функцииscanf()в управляющей строке нежелательно
использовать никаких лишних символов
(даже пробелов), кроме спецификаций.
Нельзя использовать и специальные
символы.
1) Ввести с клавиатуры переменные
population
иage
типов длинное целое и вещественное
число:
scanf(“%ld%f”, &population,
&age);
2) Ввести с клавиатуры целую переменнуюkod
в шестнадцатеричном формате, строкуnameи вещественную переменную двойной
точностиprecision:
scanf(“%x%s%lf”, &kod,
name, &precision);
При вводе нескольких
переменных разделителями между ними
являются клавиши пробела, табуляции иENTER.
3.3.2. Пример 3.1 Рассмотрим программу, в которой
вычисляется значение функции y=sin(x)
для двух введенных с клавиатуры значений
аргумента. При этом вывод на экран
необходимо выполнить в виде следующей
таблицы (ширина поля каждой переменной
8 позиций, точность – 4 знака):
Листинг 3.1
/* Программа вычисления
функции y=sin(x)
*/
#include
#include
float x1,x2,y1,y2;
printf(“введите
два значения аргумента:\n”);
scanf(“%f%f”,&x1,&x2);
printf(“\n| x | y
|”);
printf(“\n|––––––––|––––––––|\n”);
printf(“|%8.4f|%8.4f|\n”,x1,y1);
printf(“|%8.4f|%8.4f|\n”,x2,y2);
Думаю, что многим верстальщикам (и не только) приходилось верстать текстовые поля ( ), задавая им произвольные размеры. Но как сделать данный элемент резиновым и удовлетворить условиям:
Возможность установки любых горизонтальных и вертикальных отступов у текста;
Элемент должен занимать весь контейнер, в который он помещен;
Клик мышью в любое место текстового поля устанавливает в нем курсор.
Ответ достаточно прост и решается следующим методом:
Для начала, надо понять, что происходит с input-элементом при выставлении его ширины в 100% и добавления слева и справа отступов для текста.
Согласно стандартам CSS (а в данном случае их поддерживают все браузеры), результирующая ширина элемента input, при отсутствии границ (border
) и внешних отступов полей (margin
), будет равна:width = width + padding-left + padding-right
Т.е. она будет больше на величину внутренних горизонтальных отступов, и получившийся при этом элемент будет выступать за отведенную для него область.
Чтобы итоговая ширина была равна 100%, можно использовать систему из двух контейнеров:
Каждый контейнер выполняет свою роль:
input-width
– этот контейнер задает результирующую ширину текстового поля;
width-setter
– этот контейнер задает ширину input-элемента за вычетом горизонтальных внутренних отступов.
Вот набор стилей, который разъяснит эту конструкцию:
Input-width {
height:23px;
border:1px solid #999;
background:#fff;
}
.width-setter {
height:23px;
margin:0 9px;
}
.width-setter input {
width:100%;
height:14px;
padding:4px 9px 5px;
margin:0;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
line-height:14px;
color:#000;
border:0 none;
background:#9C6;
}
Пример 1
Из стилей получается, что элемент input-width
задает ширину, которую должно было занимать текстовое поле. Элемент width-setter
задает ширину input-элемента меньше на горизонтальные внутренние отступы . Стоит заметить, что его внешние отступы поля (margin
) должны быть равны padding-left
и padding-right
для элемента input.
При таком описании input-элемент будет выступать из width-setter
на величину своих горизонтальных отступов (padding
), а в IE6 - растягивать всех «родителей» под собственные размеры (пример 1). Также в браузерах IE6-7 input-элемент имеет отступы, которые нельзя убрать, обнуляя свойство margin
. Чтобы изменить такое расположение, надо сдвинуть текстовое поле влево, на размер левого отступа (padding-left
). Можно это осуществить через position:relative, но при этом в IE6 останется растянутым под ширину текстового поля input контейнер width-setter
. Для устранения растяжения надо сделать так, чтобы элемент не мог влиять на размеры своего родителя, задав, например, ему position:absolute
.
Опишем по-новому исходный набор контейнеров:
Input-width {
height:23px;
border:1px solid #999;
background:#fff;
}
.width-setter {
height:23px;
margin:0 9px;
position:relative;
}
.width-setter input {
width:100%;
height:14px;
padding:4px 9px 5px;
margin:0;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
line-height:14px;
color:#000;
border:0 none;
background:#9C6;
position:absolute;
left:-9px;
top:0;
}
Пример 2
В итоге, при применении таких стилей выполняются поставленные в начале задачи. Текстовое поле получилось с заданными отступами резиновым и кликабельным в любом его месте.
Чтобы задать конкретную ширину итоговому элементу, необходимо лишь прописать свойство width
для контейнера input-width
.
Примечание
. Приведенный метод реализации резинового текстового поля проверен на Doctype: HTML 4.01, XHTML 1.0 и HTML (HTML 5) - и имеет кроссбраузерность: IE6-8, Opera 9+, FF 2.0+, Safary 2.0+, Chrome. При отсутствии Doctype кроссбраузерная работоспособность метода не гарантирована.
Размеры таблицы, ее высота и ширина, определяются автоматически в зависимости от того, что содержат внутри себя ячейки. Чем больше наполнения в ячейках, тем больше размеры таблицы и наоборот.
Однако возможности CSS позволяют изменить размер таблицы в HTML, указывая именно те значения ширины и высоты, которые необходимы. Справедливости ради следует отметить, что еще атрибуты таблицы позволяют задавать нужные размеры . Однако, в настоящий момент мы поговорим лишь о CSS.
Необходимо подчеркнуть, что каждая таблица имеет свою минимальную ширину и минимальную высоту, на которые влияет ее содержание. И даже если вы зададите значения ширины и высоты еще меньше, то ничего не произойдет. Стороны таблицы не переступят свой минимум.
Чтобы указать ширину таблицы необходимо использовать CSS-свойство width
, а чтобы задать высоту необходимо применять свойство height
.
На примере это выглядит следующим образом.
Table {
width: 500px;
height: 100px;
}
Результат в браузере:
Полный код:
Таблица с заданными размерами
Таблица с заданными размерами
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
Значения ширины и высоты таблицы могут быть заданы, как абсолютной величиной (в пикселях), так и относительной – в процентах. Например, 20px и 20% соответственно.
Если вы используете проценты, чтобы задать размеры таблицы, то они будут высчитываться, отталкиваясь от размеров родительского элемента. Если говорить о нашем примере, то речь идет про окно браузера.
Существует еще одно значение – auto. И оно является особым, поскольку с его помощью вычисление ширины и высоты таблицы происходит автоматически, по умолчанию. На практике указание этого значения выглядит вот так.
Width: auto;
Height: auto;
Хотим акцентировать ваше внимание на еще таком важном моменте . Что высоту в процентах лучше не указывать, поскольку, как правило, в таком случае они работать не буду.
Указание размеров отдельных ячеек и столбцов
Если вы считаете, что браузер не корректно задал ширину колонок, отталкиваясь от содержимого ячеек, то вы вправе размеры ячеек и столбцов указать самостоятельно. И сейчас мы поговорим о том, как изменить размер ячейки в таблице HTML.
Изменение размеров ячеек осуществляется при помощи тех же самых CSS-свойств, что и размеры таблицы, а именно: width
и height
.
Чтобы добавить стили ячейкам, можно использовать один из двух вариантов:
Задать ячейкам индивидуальные имена классов. Выглядеть это будет вот так:
class="cell-50px"
А после этого следует применить стили для данных классов.
Задействовать атрибут style
, внутри которого прописать необходимый CSS-код.
На практике второй вариант будет выглядеть следующим образом:
...
Однако, хотим отметить, что менять размеры ячеек по отдельности необходимость возникает не так уж часто. Как правило, это делается в тех ситуациях, когда необходимо задать определенную ширину столбцов таблицы. В таком случае, задача решается проще. Необходимо всего лишь указать ширину ячеек первой строки.
Таблица с заданными размерами
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
Результат в браузере:
Как изменить размер шрифта в таблице
Зачастую возникает потребность в изменении размера текста в таблице. Например, в ячейках-заголовках. Это можно сделать с помощью CSS-свойства font-size
. Давайте зададим размер шрифта для элементов
:Th {
font-size: 30px;
}
На этом данный урок заканчивается. Предлагаю хорошенько поразмыслить над домашним заданием. Прямо так внимательно его изучите и порассуждайте. Всем всего хорошего!