Документация / Виджеты /

Текстовое поле

ZForms.Widget → ZForms.Widget.Text

Виджет для текстового поля создается на основе таких элементов HTML-форм, как:

  • <input type="text" />
  • <input type="password" />
  • <input type="file" />
  • <textarea />

Определение виджета

Виджет определяется по тэгу input или textarea, например: <input class="zf" />.

Параметры инициализации

oOptions : {
	String sPlaceHolder  : '',
	Number iMaxLength    : null,
	Boolean bFocusOnInit : false
	}

Где:

  • sPlaceHolder — плэйсхолдер, который будет подставляться в поле в том случае, если оно пустое.
  • iMaxLength — максимальное количество символов. Имеет смысл применять, только если виджет создается на основе <textarea />. Для виджетов на основе <input /> лучше воспользоваться обычным HTML-атрибутом maxlength.
  • bFocusOnInit — параметр, позволяющий установить фокус на это поле при инициализации формы.

Поддерживаемые зависимости

Пример

 Представтесь, пожалуйста

Код примера

<form class="zf" action=".">
	<dl> <!-- oClassElement -->
		<dt><label for="input-first-name">Обычное поле</label></dt>
		<dd><input class="zf" type="text" name="first-name" id="input-first-name" /></dd>
	</dl>
	<dl> <!-- oClassElement -->
		<dt><label for="input-middle-name">С&#160;подсказкой</label></dt>
		<dd><input class="zf" type="text" name="middle-name" id="input-middle-name" /></dd>
		<dd class="zf-hint"><i class="zf-arrow"></i>Представтесь, пожалуйста</dd>
	</dl>
	<dl> <!-- oClassElement -->
		<dt><label for="input-last-name">С&#160;плэйсхолдером</label></dt>
		<dd><input class="zf" type="text" name="last-name" id="input-last-name" onclick="return { oOptions : { sPlaceHolder : 'Фамилия' } }" /></dd>
	</dl>
	<dl> <!-- oClassElement -->
		<dt><label for="input-password">Поле с&#160;паролем и&#160;плэйсхолдером</label></dt>
		<dd><input class="zf" type="password" name="password" id="input-password" onclick="return { oOptions : { sPlaceHolder : 'Пароль' } }" /></dd>
	</dl>
	<dl> <!-- oClassElement -->
		<dt><label for="input-textarea">С&#160;ограничением по&#160;количеству символов</label></dt>
		<dd><textarea class="zf" type="text" name="textarea" id="input-textarea" onclick="return { oOptions : { sPlaceHolder : 'не более 10 символов', iMaxLength : 10 } }"></textarea></dd>
	</dl>
</form>