Поради щодо створення класних веб форм
У сьогоднішньому уроці я розповім Вам кілька порад щодо створення більш класних веб-форм.
1. Використовуйте ярлики (labels)
Вам не обов'язково потрібні ярлики для того, щоб форма працювала. Однак, ярлики все ж таки надають порядок Вашим текстовим полям і пов'язують один одного. Використання тега не лише семантично правильно, але й дає Вам можливість гнучкіше регулювати зовнішній вигляд за допомогою стилів.
2. Надавайте ярликам значення float
За допомогою float можна досягти структури такої таблиці без використання таблиць. Просто задайте статичну ширину, надайте float значення left і додайте невеликий відступ праворуч. Вийшло гарно!
3. Надайте формі ідентичний зовнішній вигляд у всіх браузерах
Багато браузерів мають власні правила відображення кнопок введення для форм. Якщо Вам хочеться змінити це, Ви повинні мати хорошу причину для цього. Якщо Ви все ж таки вирішили це зробити, необхідно скористатися технологією CSS скидання (reset). Наприклад:
Це може виглядати красиво, оскільки це запобігатиме появі небажаних кордонів навколо деяких об'єктів. Але також це змінить стандартні стилі, які використовуються для відображення кнопок введення в Firefox.
4. Використання псевдо класу: focus
Ви можете надати стилі текстовим полям, які набудуть чинності тільки тоді, коли користувач зробить це поле активним, використовуючи псевдо клас :focus. Наприклад, Ви можете змінити колір кордону при наведенні:
Багато браузерів підтримують це.
5. Заповнення порадами, але при наведенні їх зникнення
Але якщо Ви на цьому зупинитесь, користувачеві необхідно буде вручну видаляти текст у текстовому полі - і це не добре. Можна додати маленькийJavascript , який очищатиме пораду або нагадування, коли користувач натискає на текстове поле. Цей маленький скрипт виконується лише раз, тому якщо користувач клікне поза полем і потім захоче повернутися введена інформація не буде втрачена.
На сьогодні все! Всього найкращого!
Даний урок підготовлений для вас командою сайту.
5 останніх уроків рубрики "Різне"
Як розмістити свій сайт на хостингу? Правильно обраний хороший хостинг – це майбутнє Ваших сайтів
Проект готовий, Все перевірено на локальному сервері OpenServer та можна переносити сайт на хостинг. Ось тільки яку компанію вибрати? Пропоную переглянути хостинг fornex.com. Відмінне місце для твого проекту із перспективами бурхливого зростання.
Розробка веб-сайтів за допомогою онлайн платформи Wrike
Створення вебсайту – процес трудомісткий, що вимагає злагодженої взаємодії між замовником та виконавцем, а також між усіма членами колективу, залученими до проекту. І в цьому дуже хорошу підмогу надасть онлайн платформа Wrike.
20 ресурсів для прототипування
Добірка з кількох десятків ресурсів для створення мокапів та прототипів.
Топ 10 безкоштовних хостингів
Невелика вибірка провайдерів безкоштовного хостингу з детальним описом.
Швидка замітка: масовий UPDATE у MySQL
Ні для кого не секрет як у MySQL реалізувати масовий INSERT, а ось з UPDATE можуть виникнути складності. Щоб не вдаватися до маніпуляцій події ON_DUPLICATE, можна скористатися спеціальною конструкцією CASE … WHEN … THEN.