Значения ширины и высоты для полей ввода. Ширина поля ввода не должна быть больше максимальной длины строки. Поле ввода адреса электронной почты
В саму оболочку HTML-формы между тегами вставляются кнопки для отправки или очищения данных, кнопки для подтверждения выбора, переключатели, выпадающие списки и поля для ввода данных, последними как раз займемся сейчас.
Тег
обозначает поле для ввода текста, этот тег может принимать следующие атрибуты:
результат:
type
атрибут тега input, который указывает тип поля, в данном случае он не обязателен,
с точки зрения спецификации по HTML это значение(text) по умолчанию, но лично я советую его вставлять всегда.
name
это очень важный атрибут и является обязательным!!! Он является кодификатором данного поля, сценарии как раз
и ждут имена полей с каким-то значением. Имя этого атрибута может начинаться только с латинской буквы и заканчиваться ними,
между буквами может использоваться дефис.
value
атрибут который обозначает значение поля, или точнее значение атрибута name
,
эти атрибуты всегда отправляются в сценарий парой, name=value
или login=ваш_логин. Этот атрибут не является обязательным,
и вставляется только для того что-бы в поле отображался какой либо текст, в моем примере введите логин
.
size
этот атрибут не является обязательным, и устанавливает только количество символов для отображения, в моем примере 20, а ввести можно и 1000, но
отображаться будут только 20. Кстати 20 задавать нет смысла т.к. это значение по умолчанию, используйте этот атрибут если вам нужно больше или меньше 20 символов
для отображения.
maxlength
этот атрибут служит для ограничение символов для ввода, попробуйте в
моем примере стереть текст введите логин
и набрать больше 5, и у вас это не получится!!!
Представите что кто-то скопирует текст какой либо книги и вставит в поле где должен быть логин, это может круто увеличить нагрузку на ваш сервер, а с этим ограничителем у этого
чудо-посетителя ничего не получится!!! Ограничивать 5 символами я вам вообще не рекомендую, желательно чтобы это значение было порядка 32 или даже 64!!!
Поле для ввода паролей
type="password"
name="password" value="введите пароль" size="20" maxlength="32">
результат:
Все те же атрибуты за исключением значения "password" для атрибута type
. Это поле служит для ввода
паролей или прочего текста который не должен видеть посторонний глаз.
Скрытое поле:
type="hidden"
name="partner" value="идентификатор">
Это поле служит для отправки скрытых данных, Например, вы зарегистрировались на каком-то сайте по обмену эл.валют, как партнер и собираетесь
немного заработать, для этого вы получаете партнерский код и ставите его у себя на сайте, а в скрытое поле ставите свой идентификатор(номер партнера)
и после того как пользователь вашего сайта выберет направление перевода и нажмет кнопку "обменять" он вместе этими даными отправит ваш идентификатор и
вы срубите пару копеек с этой операции. Это не единственная возможность для скрытого поля.
Поле для загрузки файла:
type="file"
name="upload_file" size="50" >
Результат:
При помощи данного поля можно загрузить почти любой тип файла, картинки, архивы, музыку, видео и прочие. Если
вы в форме используете это поле, то занчение атрибута enctype
в теге form
должно быть "multipart/form-data"
,
чтобы браузер не кодировал, а сервер на котором лежит скрипт(сценарий) не декодировал эти файлы, т.к это может просто разрушить их.
Поле для отправки комментария:
Результат: Текст по умолчанию
textarea
- это тег для поля, он является парным!!!
Атрибут name
вам уже известен.
rows
этот атрибут устанавливает количество строчек, в моем примере 4строки.
cols
а этот атрибут устанавливает количество букв в одной строке.
Это и все поля которые пользователь может заполнять самостоятельно, за исключением type="hidden" .
Думаю, что многим верстальщикам (и не только) приходилось верстать текстовые поля (), задавая им произвольные размеры. Но как сделать данный элемент резиновым и удовлетворить условиям:
- Возможность установки любых горизонтальных и вертикальных отступов у текста;
- Элемент должен занимать весь контейнер, в который он помещен;
- Клик мышью в любое место текстового поля устанавливает в нем курсор.
Ответ достаточно прост и решается следующим методом:
Для начала, надо понять, что происходит с 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 кроссбраузерная работоспособность метода не гарантирована.
Думаю, что многим верстальщикам (и не только) приходилось верстать текстовые поля (), задавая им произвольные размеры. Но как сделать данный элемент резиновым и удовлетворить условиям:
- Возможность установки любых горизонтальных и вертикальных отступов у текста;
- Элемент должен занимать весь контейнер, в который он помещен;
- Клик мышью в любое место текстового поля устанавливает в нем курсор.
Ответ достаточно прост и решается следующим методом:
Для начала, надо понять, что происходит с 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 кроссбраузерная работоспособность метода не гарантирована.
Тег является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент не требуется помещать внутрь контейнера
Параметры
Описание параметров тега
Параметр ALIGN
Определяет, как выравнивать поле с изображением относительно текста или других элементов формы.
Синтаксис
Аргументы
- bottom - Выравнивание нижней границы изображения по окружающему тексту
- left - Выравнивает изображение по левому краю окна
- middle - Выравнивание середины изображения по базовой линии текущей строки.
- right - Выравнивает изображение по правому краю окна.
- top - Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.
Значение по умолчанию bottom. Браузеры также подддерживают аргументы absbottom , absmiddle , baseline и texttop , которые не включены в спецификацию HTML 4.01.
Параметр ALT
Параметр alt устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.
Синтаксис
Значением может быть любая подходящая текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.
Параметр BORDER
Браузеры обрабатывают изображения, добавленные через тег , подобно рисункам, созданным с помощью тега . В том числе вокруг изображения можно добавить рамку, цвет которой совпадает с цветом текста.
Синтаксис
Допустимое значение - любое целое положительное число в пикселах. Значение по умолчанию 0.
Параметр CHECKED
Этот параметр определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (radiobutton), может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы.
Синтаксис
Параметр DISABLED
Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.
Синтаксис
Параметр MAXLENGTH
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.
Синтаксис
Параметр NAME
Определяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введенным данным поля через скрипты.
Синтаксис
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в параметре name.
Параметр READONLY
Когда к тегу добавляется параметр readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.
Синтаксис
Параметр SIZE
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.
Синтаксис
Допустимое значение - любое целое положительное число.
Параметр SRC
Адрес графического файла, который будет отображаться на веб-странице в поле с изображением.
Синтаксис
В качестве значения принимается полный или относительный путь к файлу.
Параметр TYPE
Обязательный параметр type сообщает браузеру, к какому типу относится элемент формы.
Синтаксис
Аргументы
- button - Кнопка.
- checkbox - Флажки. Позволяют выбрать более одного варианта из предложенных.
- file - Поле для ввода имени файла, который пересылается на сервер.
- hidden - Скрытое поле. Оно никак не отображается на веб-странице.
- image - Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
- password - Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
- radio - Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.
- reset - Кнопка для возвращение данных формы в первоначальное значение.
- submit - Кнопка для отправки данных формы на сервер.
- text - Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.
Значение по умолчанию - text.
Параметр VALUE
Определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара «имя=значение», где имя задается параметром name тега , а значение — параметром value.
В зависимости от типа элемента параметр value выступает в следующей роли:
- для кнопок (input type="button | reset | submit") устанавливает текстовую надпись на них;
- для текстовых полей (input type="password | text") указывает предварительно введенную строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введенный в параметре value;
- для флажков и переключателей (input type="checkbox | radio") уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно определить, какой пункт выбрал пользователь.
В функции 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);
