наверх






В этом уроке мы разберем три интересных атрибута для элемента <input>. Это максимальное количество написанных символов в текстовой строке, возможность установить только чтение и обязательное для заполнения поле.


readonly


Данный атрибут предназначен для того, чтобы установить элементу режим "только чтение", то есть пользователь не сможет изменить информацию в элементе. Применить её можно, например, создавая текстовое поле с правилами. Пользователь сможет их прочитать, но не изменить. Атрибут может применяться не только в теге <input>, но и в теге <textarea>.

<textarea readonly>Правила...</textarea>


required


Данный атрибут предназначен для установки поля обязательного для заполнения. Это может пригодиться, например, на странице регистрации пользователя, когда нужно будет сделать, что бы были заполнены все поля. Если данное поле не будет заполнено, то браузер не пропустит пользователя дальше. Будет написано над полем о необходимости его заполнения. Пример:

<input type="text" name="name" required>


maxlength


Атрибут, который ограничивает количество символов в поле. В значение атрибута записывается цифра. Если это будет 10, то пользователь набрав в поле 10 символов, не сможет ввести еще одну. Пригодится это так же в создании страницы регистрации, чтобы пользователь не вводил слишком длинные данные. Пример:

<input type="password" name="name" maxlength="12" required>


Делая вывод, можно привести пример использования всех трех атрибутов:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<form name="reg" method="post" action="reg.php">
Имя:
<br><input type="text" name="name" required>
<br><br>
Пароль (максимум 12 символов):
<br><input type="password" name="name" required maxlength="12">
<br>
<br><textarea readonly>Правила...</textarea>
<br>
<br><input type="submit" value="Отправить">
</form>
</body>
</html>


Просмотреть что получилось можно на данной странице.





Поделиться
Box-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный box-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.