Треба розуміти, що безпосередньо додати кнопку всередину поля форми не можна. Тому будь-які методи лише імітують цей ефект. Для створення такої ілюзії слід прибрати вихідну рамку навколо поля для пошуку і додати її до елементу, усередині якого розташовується поле і кнопка. Даний метод працює найкраще коли всі розміри у нас мають фіксовані значення. На рис. 1 показана форма, загальна ширина якого задана як 300 пікселів, поле має ширину 274 пікселів, а кнопка — 20 пікселів.
Рис. 1. Вид поля для пошуку з кнопкою
В сучасних браузерах Firefox, Safari і Chrome у правому нижньому куті текстового поля є невеличкий куточок (рис. 1) з допомогою якого мишею можна змінити розміри поля.
Рис. 1. Вид текстового поля в браузері Chrome
Вид куточка розрізняється, але його функції залишаються однаковими, якщо клацнути мишею і потягнути за куточок, то можна змінити розміри поля. Щоб вимкнути цю можливість, слід для селектора textarea задати властивість resize зі значенням none (приклад 1).
В браузерах Safari і Chrome навколо текстового поля при отриманні фокусу спостерігається характерне світіння, яке вказує активне поле (рис. 1). Якщо по дизайну світіння не потрібно, його можна прибрати, додавши властивість outline зі значенням none до селектору input:focus. Псевдоклас :focus говорить про те, що стиль застосовується до елемента отримали фокус.
Рис. 1. Світіння навколо текстового поля в Safari
Тег <optgroup> використовується для створення та виділення групи у списку, створеним через тег <select>. Особливістю тега <optgroup> є те, що його не можна виділити як звичайний елемент списку, а всі елементи, що входять в цей контейнер, зміщуються вправо від свого початкового положення (рис. 1).
Рис. 1. Вид списку в браузері Safari
Відправка форми відбувається не тільки при натисненні на кнопку <input type="submit">, але і при натисканні на малюнок, доданий через тег <input type="image">. Обов'язковим атрибутом тега <input> при такому значенні type виступає src, який вказує шлях до графічного файлу (приклад 1).
Рамка навколо текстового поля створюється з допомогою стильового властивості border, яке додається до селектору INPUT. Фокусом ж називається активність елемента, в даному випадку, коли курсор знаходиться всередині текстового поля і користувач може вводити символи з клавіатури.
Поле зі списком, яке формується тегом <select>, за замовчуванням дорівнює ширині самого довгого тексту, заданого у контейнері <option>. Іншими словами, ширина списку формується автоматично виходячи з ширини елементів списку. За допомогою стилів, зокрема властивості width, ширину панелі можна встановлювати самостійно, незалежно від вихідного значення. Для цього width з необхідним значенням слід додати до селектору SELECT (приклад 1).
Створення однорядкового текстового поля здійснюється з допомогою тега <input>. Досить скористатися атрибутом value даного тега і присвоїти йому в якості значення рядок. Після чого заданий текст з'явиться в полі автоматично (приклад 1).
Спочатку готуємо градієнта зображення в графічному редакторі. Ширину картинці достатньо задати 30 пікселів, а висоту — 20-40 пікселів. На рис. 1 показаний приклад градієнта для додавання до кнопки.
Рис. 1. Градієнт
Ширина текстового поля, яке створюється за допомогою тега <input>, визначається стильовою властивість width, значення якого можна встановлювати в пікселях, відсотках або інших допустимих одиницях, як показано в прикладі 1.
Колір фону елемента задається стильовим властивість background-color, а колір тексту за допомогою color, ці властивості необхідно додати до селектору INPUT. Оскільки тег <input> є універсальним, то він створює не тільки текстове поле, але й інші елементи форм і щоб визначити стиль для конкретного поля можна скористатися класами, як показано в прикладі 1.
Оформлення кнопки залежить від параметрів операційної системи та обраного браузера. Тому одна і та ж кнопка може різнитися за своїм виглядом у браузері Internet Explorer і Opera. Застосування стильового властивості background не тільки змінює колір тла кнопки, але також змінює її вигляд, роблячи кнопку однаковою в різних браузерах (приклад 1).