Форум Сайтостроение Веб-строительство

Формы по стандартам W3C

S
На сайте с 14.05.2009
Offline
93
sportmaster
1109

Кто знает, если разместить на сайте форму и поместить ее в таблицу, будет ли это по стандартам W3C? Если нет, то как по-другому делать красивые формы?

Вот табличный пример:

HTML

<form>

<table>

<tr>

<td>Имя:</td>

<td><input type="text" class="name" /></td>

</tr>

<tr>

<td>Эмейл:</td>

<td> <input type="text" class="email" /></td>

</tr>

<tr>

<td></td>

<td id="butalign"><input type="submit" class="button" value="send" /></td>

</tr>

</table>

</form>

CSS

.name, .email {

background-color:#CCCCCC;

}

.button {

background-color: #666666;

}

#butalign {

text-align:right;

}

:beer:

kapyceJlb
На сайте с 06.12.2008
Offline
23
kapyceJlb
#1

Допускается внутрь контейнера <FORM> помещать другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов.

А Вам бы посоветовал в данном случае верстать блочной версткой, ибо в данном случае использование таблиц не целесообразно. Про блочную верстку вам всегда расскажет гугл ;)

html/css/jQuery верстка http://tony-art.ru/ (http://tony-art.ru/) icq: 295-249
Вопрос о профессии СЕО Semrush: количество результатов с Упал доход
SG
На сайте с 22.04.2008
Offline
32
SAG
#2

Что касается стандартов, http://validator.w3.org/ в помощь.

А что касается способа разметки, я, если лень возиться с цсс, использую таблицы, а так, в основном, что-то вроде:

<form>

<label for="input1">Йа поле 1</label><input type="text" name="asdasd" id="input1" />

<label for="input2">Йа поле 2</label><input type="text" name="asdasd" id="input2" />

<label for="input3">Йа поле 3</label><input type="text" name="asdasd" id="input3" />

</form>

Ну, и стили по ситуации.

Портфолио (http://beastman.me). Верстаю (/ru/forum/228498). Програмлю (/ru/forum/348359). Последние отзывы (/ru/forum/470865). Контакты: ICQ: 31377144пять;E-mail: andrschwartz<собако>gmail.com
П
На сайте с 08.06.2007
Offline
63
Патапыч
#3 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>формы</title>

</head>

<body>

<table width="300">

  <tr>

    <td><form name="form" method="post" action="">

      </form></td>

  </tr>

</table>

<form name="form2" method="post" action="">

  <table width="300">

    <tr>

      <td>&nbsp;</td>

    </tr>

  </table>

</form>

</body>

</html>

Валидатор (плагин к Mozilla Firefox), говорит всё OK.

Ayavryk
На сайте с 11.10.2003
Offline
209
Ayavryk
#4

Оформление форм:

http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/

Варианты верстки без таблиц:

http://www.alistapart.com/articles/prettyaccessibleforms

http://www.sprawsm.com/uni-form/

табличная/безтабличная верстка - из области религиозных войн.

Тынгыр, мынгыр, комсомол (http://erum.ru). Ехари, ехари, (жалобно) аяврик. /народная тунгусская песня/
A
На сайте с 19.07.2009
Offline
84
Arkuenon
#5
sportmaster:
Кто знает, если разместить на сайте форму и поместить ее в таблицу, будет ли это по стандартам W3C? Если нет, то как по-другому делать красивые формы?

W3C не приветствует использование таблиц для создания форм. Таблицы (по спецификации) используются для структурирования текстовых и графических данный, но никак не для форм.

Для создания красивых форм рекомендую вам использовать блоки (тег <div></div>) и каскадные таблицы стилей. Причем, если вы хотите соответствовать стандратом W3C, необходимо использовать внешние таблицы стилей.

Ko4ka.online — обратная сторона бодибилдинга и фитнеса (https://ko4ka.online/). Ironmuscles — все о бодибилдинге и фитнесе (https://ironmuscles.org/).
T
На сайте с 13.04.2008
Offline
67
t3s
#6

ТС, если из одного города в другой поехать на тракторе, будет ли это соответствовать стандартам правил дорожного движения?

webamator (http://webamator.ru) приглашает потестить сервис бесплатной оптимизации CSS и JavaScript (http://service.webamator.ru/) Занимаюсь проектами любой сложности. Качественно. Дорого. Примеры некоторых работ (http://blog.webamator.ru/category/portfolio)
Николай В.
На сайте с 07.09.2006
Offline
62
Николай В.
#7
Arkuenon:
W3C не приветствует использование таблиц для создания форм. Таблицы (по спецификации) используются для структурирования текстовых и графических данный, но никак не для форм.
Для создания красивых форм рекомендую вам использовать блоки (тег <div></div>) и каскадные таблицы стилей. Причем, если вы хотите соответствовать стандратом W3C, необходимо использовать внешние таблицы стилей.

Ахинея.

Есть стандарты, а есть семантика. Для верстки форм походят две структуры: список определений (теги DL, DD, DT) и в меньшей степени таблицы. Безымянными блоками (DIV) формы верстать неправильно.

Я делаю так:


<form enctype="application/x-www-form-urlencoded" method="post" action="/login">
	<dl>
		<dt><label for="login-username" class="required">Имя пользователя</label></dt>
		<dd><input type="text" name="username" id="login-username" value="" maxlength="25" /></dd>
		<dt><label for="login-password" class="required">Пароль</label></dt>
		<dd><input type="password" name="password" id="login-password" value="" /></dd>
		<dt></dt>
		<dd class="checkbox-wrap">
			<input type="checkbox" name="rememberMe" id="login-rememberMe" value="1" checked="checked" />
			<label for="login-rememberMe" class="optional">Запомните меня</label>
		</dd>
		<dt></dt>
		<dd><input class="button" type="submit" name="submit" id="login-submit" value="Войти" /></dd>
	</dl>
</form>
Аргументы почему не нужно Google: как сделать статические Как анализировать код страницы
A
На сайте с 19.07.2009
Offline
84
Arkuenon
#8

Так тема о стандартах, а не о семантике. И то, что таблицы, по спецификации, не предназначены для создания форм можно прочитать на сайте W3C.

Я, например, днлаю на <div>.

Вот пример: 

<form method="post">

<div class="reg_div">

<div class="reg_text">Логин:&nbsp;</div>

<div class="reg_text">Пароль:&nbsp;</div>

<div class="reg_text">Пароль<sub>(повтор)</sub>:&nbsp;</div>

<div class="reg_text">Ник:&nbsp;</div>

<div class="reg_text">E-mail:&nbsp;</div>

</div>

<div class="reg_div">

<div><input type="text" name="register[login]" class="reg_input" /></div>

<div><input type="password" name="register[passw1]" class="reg_input" /></div>

<div><input type="password" name="register[passw2]" class="reg_input" /></div>

<div><input type="text" name="register[nick]" class="reg_input" /></div>

<div><input type="text" name="register" class="reg_input" /></div>

</div>

<div style="clear: both;">

Введите код безопасности:&nbsp;<input type="text" name="pin_check" size="10" maxlength="10"  class="reg_cap" ><input type="hidden" name="rand" value="482463262">&nbsp;&nbsp;&nbsp;<img src="index.php?pin=1&amp;rand=482463262" class="captcha" alt="Код безопасности"></div>

<div><input type="submit" value="" class="reg_submit"/></div>

<div class="clear"><input type="checkbox" name="register[autologin]" value="true" />&nbsp;Сохранить данные для автоматического входа?</div>

<div><input type="hidden" name="step" value="2" /></div>

</form>

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий