Нажмите здесь, чтобы вернуться в столбец Wulin.com HTML.
Вверху: язык разметки - цитаты
Первоначальный источник глава 5 Форма
Взаимодействие всегда было в центре внимания Интернета, позволяя пользователям обмениваться информацией и общаться друг с другом. Формы позволяют нам организовать и собирать информацию от пользователей таким же образом, поэтому при разработке веб -сайта мы всегда принадлежим к категории, которая может использоваться в любой ситуации. Например, мы обнаружили, что существует около 10 000 различных способов отметить формы. Ну, может быть, не так много, но мы все еще можем думать о нескольких ситуациях, что позволяет пользователям легко использовать структуры форм, а также облегчить управление владельцами веб -сайтов. Методы маркировки форм A: Использовать формы
<form action =/path/to/script method = post>
<Таблица>
<tr>
<Th> имя: </th>
<Td> <input type = text name = name /> < /td>
</tr>
<tr>
<Th> Электронная почта: </th>
<Td> <input type = text name = email /> < /td>
</tr>
<tr>
<th> & nbsp; </th>
<Td> <input type = отправить значение = отправить /> < /td>
</tr>
</table>
</form>
Многие люди имеют давние отмеченные формы со столами. Из-за высокой частоты использования мы привыкли к тому, чтобы увидеть тип форм таким образом: левый столбец представляет собой описание текста в правом режиме, а правый столбец-это элемент формы левой формы. Использование простой формы с двумя списками является одним из простых способов завершения простых в использовании набора форм.
Некоторые люди думают, что форма не нужна, а другие думают, что форма следует считать материалом формы. Мы не намерены поддерживать ни один утверждение, но в некоторых случаях лучший способ достичь определенной макета формы при использовании формы, особенно сложных форм со многими различными элементами (формы, которые используют радиоакции, раскрывающиеся ящики и т. Д.). Полностью полагаться на CSS для обработки таких форм может быть разочаровывающим, и часто требует дополнительного <pan> и <div> для потребления большего количества тегов, чем таблица.
Затем посмотрите на рис. 5-1. Это эффект общего метода отображения визуальных браузеров A:
Рисунок 5-1: Эффект метода, отображаемый в браузере
Вы обнаружите, что использование таблиц может организовать текстовые элементы очень аккуратно. Однако для такой простой формы я могу избежать использования таблиц и использовать другие методы, которые не требуют так много меток. Если визуальный дизайн формы не требует такой наборы, форма может не потребоваться. В то же время мы также должны рассмотреть несколько простой использования. При изучении следующих двух методов мы вступим в контакт с этой частью.
<form action =/path/to/script method = post>
<p>
Имя: <input type = text name = name /> <br />
Электронная почта: <input type = text name = email /> <br />
<input type = отправить значение = отправить />
</p>
</form>
Использование одного абзаца и нескольких тегов <br /> - это возможный способ отделить все элементы, но это может быть визуально изображено немного сжимается. Рисунок 5-2 Эффект отображения одиннадцатой версии браузера:
Рисунок 5-2: Эффект метода отображения браузера B
Хотя мы можем завершить макет без использования стола, он выглядит немного переполненным и уродливым. В то же время мы также столкнулись с проблемой, что элементы формы не могут быть полностью выровнены.
Мы смогли добавить дополнительный патч в элемент <pint> с CSS, чтобы облегчить ощущение скученности. Так:
вход{
Полевая: 6px 0;
}
Предыдущий абзац добавляет 6 пикселей дополнительных исправлений в верхние и нижние части каждого элемента <Input> (включая имя, поле ввода электронной почты и кнопку отправки) и добавляет дополнительное пространство между элементами. Так же, как рисунок 5-3:
Рисунок 5-3. Эффект метода B после добавления дополнительных патчей в входной элемент
Сам метод B не имеет больших проблем, но он также может быть точно настроен, чтобы сделать форму лучше. Метод C также использует эти методы тонкой настройки, так что давайте посмотрим.
<form action =/path/to/script id = method = post>
<p> <Метка для = имя> Имя: < /label> <br />
<input type = text id = name name = name /> < /p>
<p> <Метка для = Электронная почта> Электронная почта: < /label> <br />
<input type = text id = имя электронной почты = электронная почта /> < /p>
<p> <input type = отправить значение = отправить /> < /p>
</form>
Мне нравятся несколько вещей о методе C. Во -первых, для простой формы, похожей на этот пример, мне показалось более удобным разместить каждое описание и элемент формы в отдельный абзац. Без добавления стиля дисплея, предустановленного расстояния между абзацами должно быть достаточно, чтобы вы прочитали контент. Позже мы можем установить интервал, используя CSS в качестве тегов <p>, содержащихся в форме.
Мы даже сделали еще один шаг и установили уникальный идентификатор = форма для формы. Следовательно, точный интервал, который я упомянул только сейчас, может быть примерно написан так:
#thissform p {
Полевая: 6px 0;
}
Это означает установление верхних, нижних и внешних пятен тега <p> в этой форме на 6 пикселей, охватывая заданные значения, выбранные браузером для общих абзацев.
Другое различие между методом C и первыми двумя методами заключается в том, что, хотя каждая группа (инструкция и входная коробка) помещается в <p>, мы все еще размещаем их в независимой линии. Используя <br /> для разделения каждого элемента, мы можем обойти проблему различной длины текста, что приводит к неспособности идеально выровнять входные элементы.
На рисунке 5-4 показан эффект метода отображения общего браузера, где использовались стили, установленные для тега <p>.
Рисунок 5-4. Эффект метода отображения браузера C, используя CSS для p Tag
В дополнение к визуальному эффекту метода C, наиболее важным преимуществом является то, что он улучшает легкость использования.
Использование тега <babel> для улучшения простоты использования формы требует двух шагов, а метод C выполнил эти два шага. Во -первых, используйте <babel>, чтобы подключить описание текста с соответствующими элементами формы, будь то поле ввода текста (текстовое поле), поле ввода текстового блока (текстовая область), радиосвязь (радио), флажок (флажок) и т. Д. Метод C использует тег <babel> на имя: и электронная почта: заголовок, подключение их с элементами, которые вводят данные.
Второй шаг - добавить атрибут для тега <bactel> и заполнить идентификатор соответствующего окна ввода.
Например, в методе C используйте тег <babel> для обертывания имени: и заполните атрибут для того же значения, что и идентификатор ввода, после него.
<form action =/path/to/script id = method = post>
<p> <Метка для = имя> Имя: < /label> <br />
<input type = text id = name name = name /> < /p>
<p> <Метка для = Электронная почта> Электронная почта: < /label> <br />
<input type = text id = имя электронной почты = электронная почта /> < /p>
<p> <input type = отправить значение = отправить /> < /p>
</form>
Может быть, я слышал, как другие говорят, что вы должны добавить тег <babel> в форму. Самый важный вопрос заключается в том, почему вы должны использовать тег <babel>.
Хорошая вещь для создания ассоциаций метки/идентификаторов, которые позволяют считывателям экрана читать правильную метку для каждого элемента формы без влияния расположения макета. В то же время тег <babel> создается для маркировки ярлыков стержней . При использовании этого тега мы объясняем значение каждого элемента и усиливаем структуру формы.
Существует дополнительное преимущество в использовании тега <babel> при обработке полевых и многопрофильных полевых ячеек, то есть большинство браузеров также изменят значение элемента, когда пользователь нажимает на текст в <BABEL>. Это может создать большую область щелчка для элемента ввода, что облегчает пользователям с мобильностью, которые можно заполнять формы (Mark Pilgrim, погружение в доступность , http://diveintoaccessibility.org/day_28_labeling_form_elements.html).
Например, если вы добавите в форму поле с несколькими проверками, чтобы пользователь мог выбрать, чтобы записать эту информацию, мы можем использовать тег <babel>, как это:
<form action =/path/to/script id = method = post>
<p> <Метка для = имя> Имя: < /label> <br />
<input type = text id = name name = name /> < /p>
<p> <Метка для = Электронная почта> Электронная почта: < /label> <br />
<input type = text id = имя электронной почты = электронная почта /> < /p>
<p> <input type = fackbox id = name name = inmove /> <метка для = помнить> Помните эту информацию? </label> </p><p> <input type = отправить значение = отправить /> < /p>
</form>
Отметив множество коробок, можно получить два преимущества: считыватель экрана может прочитать правильный объяснительный текст (как и этот пример, текст может отображаться после блока ввода), а диапазон переключения ящиков с несколькими проверками стал больше. Теперь, в дополнение к самим коробкам для нескольких проверков, текстовая часть также включена (большинство браузеров поддерживают ее).
На рисунке 5-5 показан эффект отображения этой формы в браузере. Мы специально указываем диапазон переключения ящика с несколькими проверками после увеличения:
Рисунок 5-5. Многочисленные поля выбора, которые включают текст в диапазоне переключения
В дополнение к формам и абзацам, я также хочу показать другой способ отметить форму, используя список определений.
Предыдущая страница 1 2 3 4 Следующая страница Прочитайте полный текст