Як створити форму для введення даних на (html) web сторінці - верстка html

Для чого в загальному необхідні форми на WEB сторінках

Розповівши на WEB сторінці про сферу своєї діяльності, компанія SD має на увазі, що познайомилися з цією інформацією і зацікавилися нею гості WEB сайту захочуть зв'язатися з компанією, задати питання, обговорити спільні проблеми, запропонувати співпрацю. Щоб прискорити і полегшити їм функцію зв'язку, досить помістити на даній сторінці спеціальну форму; заповнивши її, гість WEB сайту передасть компанії інформацію, яку він вважатиме за необхідне відправити.

Подібні форми широко використовуються на WEB сайтах для збору різних відомостей, реєстрації користувача, формування запиту і так далі Еталон звичайної форми реєстрації користувача показаний на WEB сайті narod.ru. Така форма може містити поля для введення даних, поля списків, що відкриваються списки, прапорці та перемикачі для вибору значень і інші елементи управління. Після заповнення форми користувачем особлива програма-обробник або, як її ще називають, скрипт, обробляє отримані дані і передає їх по призначенню.

Подивимося, як увіткнути в WEB документ просту форму, яка дозволить користувачеві надрукувати своє повідомлення прямо на WEB сторінці і автоматом вислати його по електронній пошті компанії SD. Але спочатку вставимо в HTML документ list.html текст із запрошенням заповнити форму, помістивши його під переліком. Текст запрошення слід виділити в окремий абзац, обмеживши його парою тегів <р>, і вирівняти по центру.

Формуємо код HTML форми

Вставте порожній рядок між закриває тегом і закриває тегом і введіть в цьому рядку наступний код:

<р style="text-align:center">Якщо у Вас є питання або пропозиції, напишіть нам:

Зараз нам необхідно помістити в формі многострочное текстове поле для перегляду сторінок Інтернету. Для цього служать теги . Як атрибути відкриваючого тега потрібно вказати кількість рядків (rows) і колонок (cols), також ім'я (name), під яким вміст текстового поля введення буде передано програмі-обробнику, наприклад:</p> <p>Вставте порожній рядок перед закриває тегом </form> і введіть наступний елемент, що створює текстове поле:</p> <h2>Пуск процесу обробка даних на формі</h2> <p>Щоб запустити процес передачі даних з форми оброблювачу, потрібен якийсь Отран управління, наприклад, кнопка. Зробити такий Отран управління зовсім не складно за допомогою одиночного тега <input> з атрибутом type. Якщо необхідно зробити кнопку, то значення цього атрибута повинно бути submit (передати):</p> <p>Такий елемент за замовчуванням виведе на WEB сторінці кнопку з написом Submit Query (Передати запит). Щоб поміняти напис на кнопці, досить включити в даний тег атрибут value з необхідним для вас значенням, наприклад: value = "Відправити". Нагадаємо, що значення атрибутів, в яких використовуються знаки, відмінні від латинських, слід неодмінно брати в лапки.</p> <p>Вставте порожній рядок перед закриває тегом </form> і введіть в неї наступний код, який створює кнопку в новенькому абзаці і розгладжує її по центру сторінки:</p> <p><р style="text-align:center;"><input type="submit" value=''Выслать"></p></p> <p>В результаті елемент <form>...</form> повинен прийняти такий вигляд:</p> <p><form action="mailto:sd@narod.ru" method="post"></p> <p><p style="text-align:center;"><input type="submit" value="Выслать"></p></p> <h2>Перевірка роботи форми</h2> <p>Роботу форми можна перевірити.</p> <p>Клацніть мишею на текстовому полі введення в вікні браузера. У цьому місці з'явиться текстовий курсор.</p> <p>Введіть у текстовому полі кілька слів.</p> <p>Натисніть кнопку ОК, щоб підтвердити передачу даних. Діалог з попередженням закриється.</p> <p>Якби з'єднання з Інтернет було встановлено, то дані з форми могли бути вислані і через деякий час ви отримали б їх по електронній пошті. Але тому що з'єднання не встановлено, то, залежно від опцій вашої поштової програми, або з'явиться повідомлення про неможливість вислати пошту, або дані з форми будуть поміщені в папку вихідних повідомлень поштової програми і вислані під час наступного підключення до поштового сервера.</p> <h2>Додаткова інформація по темі</h2> <p>Опис, як просто і правильно робляться списки значень на web (html) сторінках</p> <p>Інструкція, як без навичок створювати свої перші web (html) сторінки в Інтернет власними силами</p> <h4>Схожі статті</h4> <ul> <li> <p><a href="/articles/zvorotnij-zv-jazok-dlja-sajtu-za-dopomogoju.php">Зворотній зв'язок для сайту за допомогою скриптів форм на html і php, а так само онлайн конструкторів і</a></p> </li> <li> <p><a href="/articles/bazovi-pravila-html-verstki-listiv-dlja-email.php">Базові правила html верстки листів для email розсилки - скрипти для сайтів</a></p> </li> </ul> </div> </article> </div> </div> </div> <footer class="igrzom-footer clearfix"> <p>Copyright © 2024<br></p> </footer> </div> </div></body> </html>