Выравнять label по центру input - HTML и CSS - Страница 2

keen_ · 27.07.2012, 13:43

Цитата:

Сообщение от Naive

... православными слоями, а не таблицами

Итак, placeholder!

keen_ · 27.07.2012, 14:48

Сделал placeholder, но надписи не исчезают, когда ставится курсор.
Отстой этот placeholder!

Cronos20 · 27.07.2012, 14:54

Это в хроме не исчезает, посмотрите на другие браузеры. А placeholder - это не отстой, а стандарт, который браузеры реализовывают по-своему.

keen_ · 27.07.2012, 14:57

Цитата:

Сообщение от Cronos20

Это в хроме не исчезает, посмотрите на другие браузеры. А placeholder - это не отстой, а стандарт, который браузеры реализовывают по-своему.

Мне абсолютно нет разницы, что в Хроме.
Но Хромом пользуются много людей.

А в IE ваще ничего не отображается.

Полный отстой этот placeholder!

keen_ · 27.07.2012, 16:15

А в Safari этот фиговастый placeholder даже не хочет выравниваться по центру!

Naive · 28.07.2012, 02:17

Цитата:

А в Safari этот фиговастый placeholder даже не хочет выравниваться по центру!

Тебе самому-то удобно печатать от центра?
Ишак компенсируется гуглокодами (где-то в гуглопоиске).
Плейсхолдер поддерживается браузерами:
фф (16,6%) , хром (23,9%), опера (17,6%), сафари (7,4%)
Не поддерживается самым лучшим в мире браузером (версии 6-9) - это 12,2% пользователей...
да его даже современные мобилы поддерживают О_о!

keen_ · 28.07.2012, 13:42

Цитата:

Сообщение от Naive

Тебе самому-то удобно печатать от центра?
Ишак компенсируется гуглокодами (где-то в гуглопоиске).
Плейсхолдер поддерживается браузерами:
фф (16,6%) , хром (23,9%), опера (17,6%), сафари (7,4%)
Не поддерживается самым лучшим в мире браузером (версии 6-9) - это 12,2% пользователей...
да его даже современные мобилы поддерживают О_о!

Вот теперь мне понятно, что нужно использовать именно lable, а не placeholder, если нужно сделать максимально удобно для пользователя.

Возвращаясь к начальному вопросу - как поставить надписи по центру input?

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<style type="text/css" media="all">

form#login {
	padding:6px;
	position:relative;
	border:1px solid grey;
}
 
div#username,
div#password {
	position:relative;
	margin-right:3px;
}
 
input#username-field,
input#password-field {
	width:10em;
}
 
label.overlabel {
	color:#999;
}
label.overlabel-apply {
	position:absolute;
	top:3px;
	left:5px;
	z-index:1;
	color:#999;
    cursor:text;
 
}
</style>
 
<script type="text/javascript">
 
function initOverLabels () {
  if (!document.getElementById) return;  	
 
  var labels, id, field;
 
  // Set focus and blur handlers to hide and show 
  // LABELs with 'overlabel' class names.
  labels = document.getElementsByTagName('label');
  for (var i = 0; i < labels.length; i++) {
 
    if (labels[i].className == 'overlabel') {
 
      // Skip labels that do not have a named association
      // with another field.
      id = labels[i].htmlFor || labels[i].getAttribute('for');
      if (!id || !(field = document.getElementById(id))) {
        continue;
      }
 
      // Change the applied class to hover the label 
      // over the form field.
      labels[i].className = 'overlabel-apply';
 
      // Hide any fields having an initial value.
      if (field.value !== '') {
        hideLabel(field.getAttribute('id'), true);
      }
 
      // Set handlers to show and hide labels.
      field.onfocus = function () {
        hideLabel(this.getAttribute('id'), true);
      };
      field.onblur = function () {
        if (this.value === '') {
          hideLabel(this.getAttribute('id'), false);
        }
      };
 
      // Handle clicks to LABEL elements (for Safari).
      labels[i].onclick = function () {
        var id, field;
        id = this.getAttribute('for');
        if (id && (field = document.getElementById(id))) {
          field.focus();
        }
      };
 
    }
  }
};
 
function hideLabel (field_id, hide) {
  var field_for;
  var labels = document.getElementsByTagName('label');
  for (var i = 0; i < labels.length; i++) {
    field_for = labels[i].htmlFor || labels[i].getAttribute('for');
    if (field_for == field_id) {
      labels[i].style.textIndent = (hide) ? '-1000px' : '0px';
      return true;
    }
  }
}
 
window.onload = function () {
  setTimeout(initOverLabels, 50);
};
 
</script>
 
</head>
<body>
 
<table border="1" cellpadding="9" cellspacing="0" width="100%">
<tr align="center">
<td>

 <form id="login" action="#" method="post">
 
  <div id="username">
   <label for="username-field" class="overlabel">Username</label>
   <input id="username-field" type="text" name="username" title="Username" value="" tabindex="1" />
  </div>
 
  <div id="password">
   <label for="password-field" class="overlabel">Password</label>
   <input id="password-field" type="password" name="password" title="Password" value="" tabindex="2" />
  </div>
 
  <div id="submit">
    <input type="submit" name="submit" value="Login" tabindex="3" />
  </div>
 
 </form>
 
</td>
</tr>
</table>
 
</body>
</html>

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Размещение по центру	Vitaliy>	HTML и CSS	3	16.07.2012 15:09
Выравнять текст на MsgBox	VistaSV30	Microsoft Office Access	1	25.12.2009 15:34
выравнивание по центру	ruavia3	Microsoft Office Access	5	03.12.2009 09:30
При расположении Label на компонентах, место под Label, не реагирует на событие onClick.	NavigatorNeba	Компоненты Delphi	3	15.11.2008 19:56
Вопрос по label. Как сделать так чтобы label была прозрачной.	Lonix	Компоненты Delphi	2	01.04.2007 06:23

27.07.2012, 14:48	#12
keen_ Форумчанин Регистрация: 07.12.2011 Сообщений: 112	Сделал placeholder, но надписи не исчезают, когда ставится курсор. Отстой этот placeholder!

27.07.2012, 14:54	#13
Cronos20 Форумчанин Регистрация: 08.07.2010 Сообщений: 679	Это в хроме не исчезает, посмотрите на другие браузеры. А placeholder - это не отстой, а стандарт, который браузеры реализовывают по-своему.