Научаване как да работите с формуляри в HTML документи


HTML формулярите са изобретени и стандартизирани преди появата на JavaScript. Днес ние използваме въвеждане на формуляри, бутони и други интерактивни механизми по различни начини. Но основата му е система, базирана на парадигмата HTTP заявка-отговор.

Ние използваме формуляри, когато искате да съберете данни от някой, който посещава вашия уебсайт. Например, когато се регистрирате/влизате в приложения като Uber, Netflix или Facebook, въвеждате информация като име, имейл и парола чрез HTML формуляри.

Потребителят понякога трябва да въведе собствените си данни. Този тип взаимодействие включва:

  • Регистрация и влизане в уебсайтове
  • Въвеждане на лична информация (име, адрес, данни за кредитна карта и др.)
  • Филтриране на съдържание (използване на полета за избор, квадратчета за отметка и т.н.)
  • Направете търсене
  • Качване на файлове

За да отговори на тези нужди, HTML предоставя интерактивни контроли на формата:

  • Текстови записи (за един или повече редове)
  • Радио бутони
  • Квадратчета за отметка
  • Изберете полета
  • Качване на джаджи
  • Бутони за изпращане

Сега научаваме всички елементи, необходими за създаване на форма.

Етикет за формуляр

Това е първият таг за създаване на формуляр, който ще научим. Този таг обхваща всички други тагове, които са поставени във формуляра ни.

Нашата форма не изпраща данни никъде, защото не е свързана със сървъра. За да свържем нашия формуляр със сървъра и да обработим нашите данни, можем да използваме всеки сървърен език като Node, Python, Ruby или PHP. Частта за обработка на данни включва две важни свойства, които са прикачени към тага

. Нека да разгледаме тези функции.

Атрибути:

  1. действие: Свойството действие е уеб адресът (URL) на програма, която обработва информацията, подадена от нашия формуляр.
  2. метод: е HTTP методът, който браузърът използва за изпращане на формуляра, възможните стойности са POST и GET.
  • ПУБЛИКАЦИЯ: Данните се изпращат от тялото на формуляра към сървъра.
  • ВЗЕМЕТЕ : Данните се изпращат вътре в URL адреса и параметрите са разделени с въпросителни знаци.
    Забележка: Не можете да вмъквате формуляри в друг формуляр. Това означава, че не можете да имате таг
    в друг таг

    .

Внимание: Не можете да вмъквате формуляри в друг формуляр. Това означава, че не можете да имате таг

в друг таг

.

tg вход

Тагът за въвеждане е много широко използван таг. Използва се за създаване на текстово поле, където потребителят може да въвежда информация като имейл, парола и др.

Нека създадем текстово поле, където потребителят може да въведе името си.

<!DOCTYPE html>
<html>
<body>
   <h1>متاوبز</h1>
   <form action="" method="GET">
     <label for="name">نام</label> 
     <input name="name" id="name"> 
     <input type="submit"> 
   </form>
</body>
</html>

За да видите как HTML формата работи в действие, поставете кодовия фрагмент по-горе в index.html или друг html файл, който използвате за този урок.

Пример за работа с таг за въвеждане при създаване на формуляр

бакшиш: Тагът за въвеждане е затварящ таг, така че няма нужда да въвеждате затварящия таг, за да съответства на отварящия таг.

Добавих три атрибута в горния таг за въвеждане. Нека разгледаме всеки един в детайли.

Тип

Атрибутът тип показва какъв тип вход искаме. Ако дадем текстова стойност на атрибута тип, тук имаме предвид, че стойността, която въвеждаме в полето за въвеждане, е от текстов тип. Има много стойности за тази конкретна функция. Някои от възможните стойности са имейл, телефон за телефон и парола и др.

Пример: Когато влезете в някой от вашите акаунти (Amazon/Netflix), трябва да въведете две неща: имейл и парола. Така че в този конкретен случай се използва входният елемент. Атрибутът type се дава съответно със стойността на имейл и парола.

документ за самоличност

ID атрибутът не е задължителен, но е добра идея да добавите такъв. В някои случаи това е полезно за насочване на елементи с CSS/JavaScript. Атрибутът ID се добавя, за да можем да свързваме етикети със специфични контроли на формуляра.

име

Атрибутът име е задължителен. Когато даден формуляр се изпрати на код от страна на сървъра, сървърът може да разбере данните на формуляра и да обработи стойностите по подходящ начин.

държач на място

Това е кратък съвет, който се показва в полето за въвеждане, преди потребителят да въведе стойност. Когато потребителят започне да въвежда в полето за въвеждане, контейнерът изчезва.

етикет

Понастоящем е невъзможно потребителят да каже кой контролен формуляр какво прави. Няма начин да разберете къде въвеждате имейла и къде въвеждате паролата. Формулярът изглежда много непълен и объркан.

Можем да етикетираме всяка от нашите контроли на формуляра с помощта на етикетния елемент.

Атрибути:

  • за: Атрибутът for свързва тага с конкретен таг на формуляр. Съвпадението е по ID. Както можете да видите в горния пример, стойността на атрибута ID се дава на елемента за въвеждане на имейл. Стойността на атрибута for, дадена на елемента етикет, също е имейл, така че и двата са свързани един с друг.
<!DOCTYPE html>
<html>
<body>
   <h1>متاوبز</h1>
   <form action="" method="GET">
     <label for="name">نام</label></br> 
     <input name="name" id="name" placeholder="نام خود را وارد نمایید"></br>
     <input type="submit"> </br>
</form>
</body>
</html>

Запазете резултатите си и ги проверете в браузъра си. Трябва да видите нещо като изображението по-долу:

Пример за работа с тага за въвеждане и неговите характеристики при създаване на формуляра

Внимание: Когато щракнем върху таг, ние автоматично фокусираме върху полето за въвеждане, свързано с тага. Това е поведението по подразбиране.

Нека видим как изглеждат няколко други основни входни елемента.

Таг за формуляр за множество въвеждане (текст, имейл, парола)

Използването на различни стойности за атрибута тип ще даде различни резултати. Например, можете да зададете входовете като имейл, текст или парола и т.н. Всички те се държат малко по-различно, както ще видите по-долу.

<!DOCTYPE html>
<html>
<body>
   <h1>متاوبز</h1>
   <form action="" method="GET">
     <label for="name">نام</label></br> 
     <input name="name" id="name" placeholder="نام خود را وارد نمایید"></br>
     <label for="email">ایمیل</label> </br>
     <input type="email"></br>
     <label for="password">رمز</label> </br>
     <input type="password"></br>
     <input type="submit"> </br>
</form>
</body>
</html>

Запазете резултатите си и ги проверете в браузъра си. Трябва да видите нещо като изображението по-долу:

Таг за формуляр за множество въвеждане (текст, имейл, парола)

Таг за текстово поле

Понякога един ред текст не е достатъчен и обикновен елемент за въвеждане няма да работи. Например, някои уебсайтове имат формуляр за контакт, в който хората могат да въвеждат своите въпроси или съобщения. В тези случаи е по-добре да използвате тага textarea.

)

Атрибути:

  • документ за самоличност: Това е същото като споменатото в елемента по-горе.
  • име: Това е същото като споменатото в елемента по-горе.
  • колони: Указва видимата ширина на текстова област.
  • редове: Указва броя на видимите редове в текстова област.
<!DOCTYPE html>
<html>
<body>
   <h1>متاوبز</h1>
   <form action="" method="GET">
     <label for="name">نام</label></br> 
     <input name="name" id="name" placeholder="نام خود را وارد نمایید"></br>
     <label for="email" id="email">ایمیل</label> </br>
     <input type="email"></br>
     <label for="password" id="password">رمز</label> </br>
     <input type="password"></br>
     <textarea placeholder="متن خود را وارد نمایید" id="text" cols="50" rows="5"></textarea></br>
     <button type="submit">
      ارسال
    </button>
</form>
</body>
</html>

Можете да видите, че текстовото поле ни позволява да пишем на няколко реда. Текстовото поле може да бъде преоразмерено от потребителя.

Таг Textarea във формуляри

бутон етикет

Тагът на бутона е един от най-важните елементи на формата. Без бутона не можете да изпратите никакъв формуляр на сървъра за обработка.

Тагът на бутона приема атрибут, наречен тип. Тази функция приема три стойности: изпращане, нулиране и бутон.

Атрибути:

  • “тип =”нулиране: При щракване всички данни от формуляра ще бъдат изчистени.
  • „тип =” бутон: Той няма поведение по подразбиране и се използва най-вече с JavaScript, за да го програмира за персонализирано поведение.
  • „тип =“изпратете: Поведението по подразбиране на типа изпращане, както подсказва името, е да изпрати формуляра и да изпрати всички данни на сървъра.
<!DOCTYPE html>
<html>
<body>
   <h1>متاوبز</h1>
   <form action="" method="GET">
     <label for="name">نام</label></br> 
     <input name="name" id="name" placeholder="نام خود را وارد نمایید"></br>
     <label for="email">ایمیل</label> </br>
     <input type="email"></br>
     <label for="password">رمز</label> </br>
     <input type="password"></br>
     <label for="tel"> متن خود را وارد نمایید</label></br>
     <textarea placeholder="متن خود را وارد نمایید" id="text" cols="50" rows="5"></textarea></br>
     <button type="submit">
      ارسال
    </button>
</form>
</body>
</html>

Формата ни изглежда ли доста добре сега?

Създайте падащо поле за избор във формуляра

Понякога, когато създавате формуляр, не искате потребителят да може да въвежда текст. Вместо това може да искате те да избират от някои предварително дефинирани опции, които предоставяте.

Всеки път, когато имате списък с опции, който е по-дълъг от, да речем, четири или пет елемента, най-добре е да използвате поле за избор, защото спестява място.

Да кажем, че нашата форма е за студенти, които искат да получат прием в университет. Искаме да позволим на студентите да избират от предварително определен списък с университетски програми.

Тагът на полето за избор, .

изберете етикет при създаване на полета за избор във формуляри

Етикетът Select предоставя падащо меню, съдържащо опции за избор. Тагът по-горе.

  • многократни : Ако добавите множествения атрибут, можете да позволите да бъдат избрани множество опции.
  • опция таг

    Опцията показва една от опциите, които потребителят може да избере от падащото меню. Тагът

    Атрибути:

    • стойност: Когато изпратите формуляр към код от страна на сървъра, всеки етикет на формуляр има свързана стойност за въвеждане на текст и текстови области. Това е стойността на всичко, което потребителят въвежда в полето. Тъй като обаче създаваме тези предварително дефинирани опции, трябва да посочим каква трябва да бъде стойността при изпращане. Следователно ние използваме атрибута value, за да посочим стойностите на предварително дефинираните опции.
    • избрано: За да изберете елемент от списъка

    Като :

    <!DOCTYPE html>
    <html>
    <body>
       <h1>متاوبز</h1>
       <form action="" method="GET">
        <select multiple>
            <option value="moon1 selected">فروردین</option>
            <option value="moon2">اردیبهشت</option>
            <option value="moon3">خرداد</option>
            <option value="moon4">تیر</option>
            <option value="moon5">مرداد</option>
            <option value="moon6">شهریور</option>
            <option value="moon7">مهر</option>
            <option value="moon8">آبان</option>
            <option value="moon9">آذر</option>
            <option value="moon10">دی</option>
            <option value="moon11">بهمن</option>
            <option value="moon12">اسفند</option>
          </select>
         <button type="submit">
          ارسال
        </button>
    </form>
    </body>
    </html>

    Запазете резултатите си и ги проверете в браузъра си.

    етикет

    optgroup таг

    С тага можем да организираме нашия списък в логически групи.

    Атрибути:

    • етикет: Името на група опции. В следващия пример списъкът с нашите опции е разделен на четири групи с етикета на главата.
    <!DOCTYPE html>
    <html>
    <body>
       <h1>متاوبز</h1>
       <form action="" method="GET">
        <select>
            <optgroup label="فصل بهار">
                <option value="moon1">فروردین</option>
                <option value="moon2" selected>اردیبهشت</option>
                <option value="moon3">خرداد</option>
            </optgroup>
            <optgroup label="فصل تابستان">
                <option value="moon4">تیر</option>
                <option value="moon5">مرداد</option>
                <option value="moon6">شهریور</option>
            </optgroup>
            <optgroup label="فصل پاییز">
                <option value="moon7">مهر</option>
                <option value="moon8">آبان</option>
                <option value="moon9">آذر</option>
            </optgroup>
            <optgroup label="فصل زمسستان">
                <option value="moon10">دی</option>
                <option value="moon11">بهمن</option>
                <option value="moon12">اسفند</option>
            </optgroup>
          </select>
         <button type="submit">
          ارسال
        </button>
    </form>
    </body>
    </html>

    Запазете резултатите си и ги проверете в браузъра си. Трябва да видите нещо като изображението по-долу:

    тагдър форма

    Радио бутони във формата

    Падащите менюта са страхотни, ако имате много опции. Ако имате нещо като 5 опции или по-малко, по-добре е да използвате радио бутони.

    Разликата между полетата за избор и радио бутоните е, че радио бутоните ви показват всички опции наведнъж. Подобно на падащото меню, потребителят може да избере само един от тях.

    Атрибути:

    • име: Това е същото като споменатото в елемента по-горе.
    • стойност: Тъй като създаваме тези предварително дефинирани опции, трябва да посочим каква трябва да бъде стойността при изпращане. Следователно ние използваме атрибута value, за да посочим стойностите на предварително дефинираните опции.

    Внимание: Ако изберете опция и след това се опитате да изберете друга опция, ще видите, че тя премахва избора на предишната опция. Начинът, по който знае да направи това, е защото имаме точно същия атрибут на име. Значи знае, че тези два радио бутона са част от една и съща група.

    <!DOCTYPE html>
    <html>
    <body>
       <h1>متاوبز</h1>
       <form action="" method="GET">
            <p>انتخاب ماه مورد نظر از فصل بهار</p>
            <label>
                <input type="radio" name="Season">
                فروردین
            </label>
            <label>
                <input type="radio" name="Season">
                 اردیبهشت
            </label>
            <label>
                <input type="radio" name="Season">
                 خرداد
                </label>
         <button type="submit">
          ارسال
        </button>
    </form>
    </body>
    </html>

    Запазете резултатите си и ги проверете в браузъра си. Трябва да видите нещо като изображението по-долу:

    Радио бутони във формата

    Внимание: Ако искаме радио бутоните да бъдат част от една и съща група радио бутони, името трябва да е същото.

    Квадратчета за отметка във формата

    Понякога може да имате група от предварително дефинирани опции. Искате потребителят да може да избира няколко опции, а не само една. Това е мястото, където квадратчетата за отметка са полезни.

    Атрибути:

    • име: Това е същото като споменатото в елемента по-горе.
    • стойност: Тъй като създаваме тези предварително дефинирани опции, трябва да посочим каква трябва да бъде стойността при изпращане. Следователно ние използваме атрибута value, за да посочим стойностите на предварително дефинираните опции.
    • проверено: По подразбиране записът в полето за отметка не е отметнат. Като използвате атрибут, наречен checked, можете да зададете режима по подразбиране на checked. Не забравяйте, че това е булево свойство.
    <!DOCTYPE html>
    <html>
    <body>
       <h1>متاوبز</h1>
       <form action="" method="GET">
            <p>انتخاب ماه های مورد نظر از فصل بهار</p>
            <label>
                <input type="checkbox" checked> فروردین
            </label><br>
            <label>
                <input type="checkbox" > اردیبهشت
            </label><br>
            <label>
                <input type="checkbox" > خرداد
            </label><br>
         <button type="submit">
          ارسال
        </button>
    </form>
    </body>
    </html>

    Запазете резултатите си и ги проверете в браузъра си. Трябва да видите нещо като изображението по-долу:

    Поставяне на отметки във формата

    Внимание: Малко квадратче за отметка може да бъде трудно за щракване. Препоръчително е да поставите елемент

    Разлика между квадратчето за отметка и радио бутона във формата

    1. Квадратчетата за отметка могат да съществуват самостоятелно, докато бутоните за избор могат да се показват само като група (трябва да има поне 2 бутона за избор).
    2. Поставянето на отметка в квадратчето не е задължително, но избирането на един от бутоните за избор е задължително.

    Научихме за много тагове за HTML формуляри и покрихме най-важното.

    Не се притеснявайте да запазите всичко. Почти никой професионален уеб разработчик не може да назове всяка функция или елемент. По-важно от запаметяването е да се научите как да търсите неща в документи, когато е необходимо.

    Честито ! Вече можете да задавате и проектирате различни таблици на уеб страницата в браузъра Следвайте ни стъпка по стъпка, за да научите професионално HTML.

    Прочетете повече за HTML и станете професионалист:

    Ако имате въпроси или коментари, ще се радваме да ги споделите с нас. Свържете се с нас в Telegram.

    Related Posts

    دیدگاهتان را بنویسید

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *