В процеса на навигация през сайтовете потребителят основно кликва само върху връзкиза навигация в уеб страници.

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

• регистрация и влизане в сайтове;
• въвеждане на лична информация (име, адрес, данни за кредитна карта и др.);
• филтриране на съдържанието (с помощта на падащи списъци, квадратчета за отметка и др.);
• извършване на търсене;
• качване на файлове.

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

• текстови полета (за един или повече реда);
• ключове;
• квадратчета за отметка;
• падащи списъци;
• изтегляне на джаджи;
• бутони за изпращане.

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

елемент

е блоков елемент, който дефинира интерактивенчаст от уеб страница. В резултат на това всички контроли (напр , или <button>) би трябвало <i>вътре</i>елемент <form> .</p><p>Два HTML атрибута <b>са необходими</b>:</p><ul><li>действие съдържа адрес, който дефинира <i>където</i>информация за формуляра ще бъде изпратена;</li><li>методът може да бъде или GET, или POST и определя, <i>как</i>информация за формуляра ще бъде изпратена.</li> </ul><p>Обикновено информацията за формуляра се изпраща на <b>сървър</b>. <i>Как</i>тези данни ще бъдат обработени извън обхвата на това ръководство.</p><p>Мислете за формуляр като за колекция от контроли, които работят заедно за постигане <b>един</b>операция. Ако сте написали формуляр за вход в сайта, може да сте го направили <b>три</b>полета:</p><ul><li>поле за имейл <input type="email"> </li><li>поле за парола <input type="password"> </li><li>бутон за изпращане <input type="submit"> </li> </ul><p>Тези три HTML елемента ще бъдат увити в един формуляр <span><form action="/login" method="POST"> </span>.</p><p>Можете по подобен начин да добавите формуляр за регистрация на същата HTML страница, в отделен елемент <form> .</p><h2>Текстови полета</h2><p>Почти всички форми изискват <b>текст</b>въвеждане от потребителите за въвеждане на тяхното име, e-mail адрес, парола, адрес и т.н. Текстовите полета на формуляра се предлагат в различни варианти.</p><p>Въпреки че тези полета са много сходни и позволяват на потребителите да въвеждат всякакъв вид текст (дори и грешен), техният тип предоставя специфичен <b>семантика</b>за въвеждане, указвайки каква информация е полето <b>трябва да</b>съдържат.</p><p>Браузърите могат впоследствие да променят леко интерфейса на контролата, за да подобрят <i>интерактивност</i>или предложете какво съдържание се очаква.</p><p>Например полето за парола показва точки вместо знаци. А полето за числа ви позволява да увеличавате / намалявате стойността с помощта на клавишите нагоре и надолу.</p><h2>заместител</h2><p>Текстовите полета могат да се показват <b>подканващ</b>текст, който ще изчезне веднага щом се въведе някакъв текст.</p><p> <input type="text" placeholder="Моля въведете вашето име"> </p><p>Ако започнете да пишете нещо, ще видите, че текстът "Въведете вашето име" изчезва.</p><h2><label></h2><p>Тъй като елементите на формата не са много описателни сами по себе си, те обикновено се предшестват от текст <b>етикет</b>.</p><p> <label>електронна поща</label> <input type="email"> </p><p>Докато заместващият елемент вече предоставя някакъв намек за това какво съдържание се очаква, те имат предимството, че са видими по всяко време и могат да се използват заедно с други типове елементи на формуляр, като квадратчета за отметка или бутони за избор.</p><p>Докато можете да използвате кратки абзаци, за да опишете елементите на формуляр, използвайки <label>е семантично по-правилен, защото съществуват само във форми. <label>може също да бъде свързан с конкретен елемент на формуляр, използвайки атрибута for, съответстващ на стойността на идентификатора на полето.</p><p> <label for="first_name">име</label> <input id="first_name" type="text"> </p><p>Когато щракнете върху етикет, фокусът се премества в текстовото поле и поставя курсора вътре в него. Въпреки че този пакет изглежда безполезен, той е полезен с квадратчета за отметка и радио бутони.</p><h2>Квадратчета за отметка</h2><p><b>Квадратчета за отметка</b>са елементи на форма, които имат само две състояния: включено или изключено. Те основно позволяват на потребителя да каже да или не на нещо.</p><p> <input type="checkbox">Помни ме</p><p>Тъй като може да е трудно да щракнете върху малко квадратче за отметка, се препоръчва да поставите квадратчето и описанието му вътре <label> .</p><p> <label> <input type="checkbox">Съгласен съм с условията</label> </p><p>Можете да кликнете върху текста „Съгласен съм с условията“, за да поставите отметка в квадратчето.</p><p>По подразбиране квадратчето за отметка е деактивирано. Можете да го маркирате като отметнато, просто като използвате атрибута checked.</p><p> <label> <input type="checkbox" checked>Използвайте моя адрес за фактуриране</label> </p><h2>Превключватели</h2><p>Можете да предоставите на потребителя <b>списък с опции</b>избираеми с помощта на превключватели.</p><p>За да работи този елемент на формуляра, трябва вашият HTML код <b>група</b>списък с радио бутони заедно. Това се постига чрез използване на същата стойност за атрибута name:</p><p> <label>Семейно положение</label> <label> <input type="radio" name="status">Неженен</label> <label> <input type="radio" name="status">Женен</label> <label> <input type="radio" name="status">Разведени</label> <label> <input type="radio" name="status">Вдовец</label> </p><p>Тъй като всички радиобутони използват една и съща стойност за атрибута name (в този случай стойността на състоянието), избирането на един ще отмени всички останали. Превключвателите са <b>взаимно изключващи се</b>.</p><h3>Разлика между радио бутони и квадратчета за отметка</h3><p>Въпреки че квадратчето за отметка съществува <b>от само себе си</b>, превключвателите могат да се показват само като <b>списък</b>(което означава поне две опции).</p><p>Освен това щракването върху квадратчето за отметка е <b>произволен</b>, докато изборът на един от бутоните за избор е <b>задължителен</b>... Ето защо не е възможно да изключите ключа, ако изберете най-близката опция. В крайна сметка винаги се избира един от бутоните за избор.</p><h2>Падащи менюта</h2><p>Ако броят на опциите за избор заема твърде много място, можете да използвате падащите менюта <select> .</p><p>Работят като ключове, само оформлението е различно.</p><p> <select> <option>януари</option> <option>февруари</option> <option>Март</option> <option>април</option> <option>Може</option> <option>юни</option> <option>Юли</option> <option>Август</option> <option>Септември</option> <option>октомври</option> <option>ноември</option> <option>декември</option> </select> </p><h3>Множество избор от падащото меню</h3><p>Ако добавите атрибута multiple, можете да предоставите множество възможности за избор.</p><p> <label>Какви браузъри използвате?</label> <select multiple> <option>Google Chrome</option> <option>Internet Explorer</option> <option>Mozilla Firefox</option> <option>Опера</option> <option>сафари</option> </select> </p><p>Изберете няколко опции, като задържите Ctrl (или ⌘) и щракнете. Това може да бъде добра алтернатива на използването на множество флагове на ред.</p><h2>Пример: пълен регистрационен формуляр</h2> <form action="/signup" method="POST"> <p> <label>Обжалване</label> <label> <input type="radio" name="title" value="г-н">г-н</label> <label> <input type="radio" name="title" value="г-жа">Госпожица</label> </p> <p> <label>име</label> <input type="text" name="first_name"> </p> <p> <label>Фамилия</label> <input type="text" name="last_name"> </p> <p> <label>електронна поща</label> <input type="email" name="email"> </p> <p> <label>Телефон</label> <input type="tel" name="phone"> </p> <p> <label>парола</label> <input type="password" name="password"> </p> <p> <label>Потвърдете паролата</label> <input type="password" name="password_confirm"> </p> <p> <label>Страна</label> <select name="country"> <option>Канада</option> <option>Франция</option> <option>Германия</option> <option>Италия</option> <option>Япония</option> <option>Русия</option> <option>Великобритания</option> <option>САЩ</option> </select> </p> <p> <label> <input type="checkbox" name="terms">Съгласен съм с условията за ползване</label> </p> <p> <button>Регистрирай се сега</button> </p> </form> <p>Налични са и други елементи на формата, но ние разгледахме най-често използваните.</p> <p><b>HTML формуляри</b>са контроли, които се използват за събиране на информация от посетителите на уебсайта.</p> <p>Уеб формулярите са съставени от колекция от текстови полета, бутони, списъци и други контроли, върху които може да се щракне. Технически, формите прехвърлят данни от потребител към отдалечен сървър.</p> <p>За получаване и обработка на данни от формуляри се използват езици за уеб програмиране, като напр <b>PHP</b>, <b>Perl</b>.</p> <p>Преди HTML5 уеб формулярите бяха колекция от множество елементи. <input type="text"> , <input type="password">завършващ с бутон <input type="submit">... Отне много усилия за стилизиране на формуляри в различни браузъри. Освен това формулярите изискват JavaScript за валидиране на въведените данни и са били лишени от специфични типове полета за въвеждане за посочване на ежедневна информация като дати, имейл адреси и URL адреси.</p> <p><b>HTML5 формуляри</b>реши повечето от тези често срещани проблеми чрез въвеждане на нови атрибути, осигуряващи възможност за промяна на външния вид на елементите на формата чрез <b>CSS3</b>.</p> <img src='https://i0.wp.com/html5book.ru/wp-content/uploads/2015/05/html5_form.png' align="left" height="696" width="660" loading=lazy loading=lazy>Ориз. 1. Подобрени уеб формуляри с HTML5 <h2>Създаване на HTML5 формуляр</h2> <i> </i><h3>1. Елемент <form></h3> <p>Всяка форма се основава на елемент <form>...</form>... Той не предвижда въвеждане на данни, тъй като е контейнер, който държи заедно всички контроли на формуляра - <b>полета</b>... Атрибутите на този елемент съдържат информация, която е обща за всички полета на формуляр, така че трябва да включите логически комбинирани полета в един формуляр.</p> <table class="t3">Таблица 1. Атрибути на маркери <form> <tr><th>Атрибут</th> <th>Значение / Описание</th> </tr><tr><td>accept-charset</td> <td>Стойността на атрибута е ограничена с интервал <b>списък за кодиране на символи</b>да се използва за подаване на формуляра, например <form accept-charset="ISO-8859-1"> . </td> </tr><tr><td>действие</td> <td><b>Задължителен атрибут</b>който определя URL адреса на манипулатора на формуляра на сървъра, към който се предават данните. Това е файл (например action.php), който описва какво да се прави с данните от формуляра. Ако стойността на атрибута не е посочена, след презареждане на страницата елементите на формуляра ще приемат стойностите си по подразбиране. <br>Ако цялата работа ще бъде извършена от страна на клиента от JavaScript скриптове, тогава стойността # може да бъде посочена за атрибута action. <br>Можете също така да се уверите, че попълненият от посетителя формуляр пристига във вашата поща. За да направите това, трябва да направите следния запис: <br> <form action="mailto:адрес вашей электронной почты" enctype="text/plain"></form> </td> </tr><tr><td>автоматично довършване</td> <td><br><br></td> </tr><tr><td>enctype</td> <td>Използва се за обозначаване <b>MIME</b>-тип на данните, изпратени с формуляра, например enctype = "multipart / form-data". Посочено само ако метод = "публикация". <br>application / x-www-form-urlencoded е типът съдържание по подразбиране, което показва, че изпратените данни са списък с URL-кодирани променливи на формуляр. Символите за интервал (ASCII 32) ще бъдат кодирани като +, а специалните знаци като! ще бъде кодиран в шестнадесетичен като% 21. <br>multipart / form-data - използва се за подаване на формуляри, съдържащи файлове, данни извън ASCII и двоични данни, състои се от няколко части, всяка от които представлява съдържанието на отделен елемент на формуляр. <br>текст / обикновен - показва, че се предава обикновен (не html) текст.</td> </tr><tr><td>метод</td> <td>Указва как се предават данните от формуляра. <br>Методът get предава данни към сървъра през адресната лента на браузъра. Когато генерирате заявка към сървъра, всички променливи и техните стойности образуват последователност като www.anysite.ru/form.php?var1=1&var2=2. Имената и стойностите на променливите се добавят към адреса на сървъра след? и са разделени със знака &. Всички специални знаци и букви, различни от латински, са кодирани във формат % nn, интервалът се заменя с +. Този метод трябва да се използва, ако не прехвърляте големи количества информация. Ако възнамерявате да изпратите файл заедно с формуляра, този метод няма да работи. <br>Методът на публикуване се използва за изпращане на големи количества данни, както и поверителна информация и пароли. Данните, изпратени чрез този метод, не се виждат в заглавката на URL, тъй като се съдържат в тялото на съобщението. <br> <form action="action.php" enctype="multipart/form-data" method="post"></form> </td> </tr><tr><td>име</td> <td>Комплекти <b>име на формата</b>да се използва за достъп до елементи на формуляр чрез скриптове, например name = "opros".</td> </tr><tr><td>новалидат</td> <td>Деактивира валидирането на бутона за подаване на формуляра. Атрибутът се използва без посочване на стойност</td> </tr><tr><td>цел</td> <td>Указва прозореца, към който ще бъде насочена информацията: <br>_blank - нов прозорец <br>_self - същата рамка <br>_parent - родителската рамка (ако съществува, ако не, тогава към текущата) <br>_top е прозорецът от най-високо ниво по отношение на тази рамка. Ако повикването не е от дъщерна рамка, тогава към същата рамка.</td> </tr></table><h3>2. Групиране на елементи от формуляр</h3> <p>елемент <fieldset>...</fieldset>е предназначен за групиране на свързани помежду си елементи, като по този начин разделя формата на логически фрагменти.</p> <p>Всяка група елементи може да бъде наименувана с помощта на елемента <legend>който следва етикета <fieldset>... Името на групата се появява вляво в горната граница <fieldset>... Например, ако елементът <fieldset>информация за контакт се съхранява:</p><p> <form> <fieldset> <legend>Информация за връзка</legend> <p><label for="name">име <em>*</em></label><input type="text" id="name"></p> <p><label for="email">електронна поща</label><input type="email" id="email"></p> </fieldset> <p><input type="submit" value="изпрати"></p> </form> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' align="left" width="100%" loading=lazy loading=lazy>Ориз. 2. Групиране на елементи от формуляр с помощта на <fieldset> </p><table class="t3">Таблица 2. Атрибути на етикета <fieldset> <tr><th>Атрибут</th> <th>Значение / Описание</th> </tr><tr><td>хора с увреждания</td> <td>Ако атрибутът присъства, тогава група свързани елементи на формуляр, които са вътре в контейнера <fieldset>деактивиран за попълване и редактиране. Използва се за ограничаване на достъпа до някои полета на формуляра, съдържащи предварително въведени данни. Атрибутът се използва без посочване на стойност - <fieldset disabled> . </td> </tr><tr><td>форма</td> <td> <form>в същия документ. Указва една или повече форми, към които принадлежи тази група елементи. Атрибутът в момента не се поддържа от нито един браузър.</td> </tr><tr><td>име</td> <td>Определя <b>име</b>да се използва за препращане към елементи в JavaScript или за справка с данни от формуляра, след като формулярът е попълнен и изпратен. Аналогично на атрибута id.</td> </tr></table><h3>3. Създайте полета на формуляр</h3> <p>елемент <input>създава повечето от полетата на формуляра. Атрибутите на елемента се различават в зависимост от типа поле, което елементът се използва за създаване.</p> <p>С помощта на css стилове можете да промените размера на шрифта, вида на шрифта, цвета и други свойства на текста, както и да добавите граници, цвят на фона и фоново изображение. Ширината на полето се задава от свойството width.</p> <table class="t3">Таблица 3. Атрибути на маркера <input> <tr><th>Атрибут</th> <th>Значение / Описание</th> </tr><tr><td>приемам</td> <td>Указва типа на файла, който е разрешен за изпращане на сървъра. Посочено само за <input type="file">... Възможни стойности: <br>file_extension - позволява качване на файлове с посоченото разширение, например accept = ". gif", accept = ". pdf", accept = ". doc" <br>audio / * - позволява изтегляне на аудио файлове <br>video / * - позволява качване на видео файлове <br>image / * - позволява качване на изображения <br>media_type - указва типа на носителя на качените файлове.</td> </tr><tr><td>алт</td> <td>Определя <b>алтернативен текст</b>за изображения, посочени само за <input type="image"> . </td> </tr><tr><td>автоматично довършване</td> <td>Отговаря за запаметяването на стойностите, въведени в текстовото поле и автоматичното им заместване при последващо въвеждане: <br>включено - означава, че полето не е защитено и неговата стойност може да се съхранява и извлича, <br>изключено - деактивира автоматичното попълване на полетата на формуляра.</td> </tr><tr><td>автофокус</td> <td>Позволява ви да се уверите, че в заредената форма това или онова поле за въвеждане вече има фокус (избрано), като е готов за въвеждане на стойност.</td> </tr><tr><td>проверено</td> <td>Атрибутът проверява дали квадратчето за отметка е отметнато по подразбиране при зареждане на страницата за полета от тип = "checkbox" и type = "radio".</td> </tr><tr><td>хора с увреждания</td> <td></td> </tr><tr><td>форма</td> <td>Стойността на атрибута трябва да е равна на атрибута id на елемента <form>в същия документ. Посочва една или повече форми, към които принадлежи това поле на формуляр.</td> </tr><tr><td>образуване</td> <td>Задава URL адреса на файла, който ще обработва данните, въведени в полетата при изпращане на формуляра. Задава се само за полета от тип type = "submit" и type = "image". Този атрибут отменя стойността на атрибута action на самия формуляр.</td> </tr><tr><td>тип форма</td> <td>Определя как ще бъдат кодирани данните от полето на формуляра, когато бъдат изпратени на сървъра. Отменя стойността на атрибута enctype на формуляра. Задава се само за полета от тип type = "submit" и type = "image". Опциите са: <br>application / -x-www-form-urlencoded е по подразбиране. Всички знаци се кодират преди изпращане (интервалите се заменят с +, специалните знаци се преобразуват в ASCII HEX стойности) <br>multipart / form-data - знаците не са кодирани <br>текст / обикновен - интервалите се заменят със знака +, а специалните знаци не се кодират.</td> </tr><tr><td>форма метод</td> <td>Атрибутът указва метода, който браузърът ще използва за изпращане на данни от формуляра на сървъра. Задава се само за полета от тип type = "submit" и type = "image". Отменя стойността на атрибута method на формуляра. Опциите са: <br>get е по подразбиране. Данните от формуляра (двойка име / стойност) се добавят към URL адреса и се изпращат на сървъра: url? Име = стойност и име = стойност <br>post - Данните от формуляра се изпращат като http заявка.</td> </tr><tr><td>formnovalidate</td> <td>Указва, че данните от полето на формуляра не трябва да се проверяват при изпращане на формуляра. Отменя стойността на атрибута novalidate на формуляра. Може да се използва без посочване на стойност на атрибут.</td> </tr><tr><td>formtarget</td> <td>Определя къде да се покаже отговорът, получен след изпращане на формуляра. Задава се само за полета от тип type = "submit" и type = "image". Отменя стойността на целевия атрибут на формуляра. <br><br><br>_parent - Зарежда отговора към родителския кадър <br>_top - зарежда отговора на цял екран <br>framename - Зарежда отговора в рамка с посоченото име.</td> </tr><tr><td>височина</td> <td>Стойността на атрибута съдържа броя на пикселите без посочване на единица. Задава височината на поле на формуляр от тип тип = "изображение", например <input type="image" src="img_submit.gif" height="50">... Препоръчително е да зададете едновременно височината и ширината на полето.</td> </tr><tr><td>списък</td> <td>Това е препратка към артикул <datalist>, съдържа неговия идентификатор. Позволява ви да предоставите на потребителя няколко опции за избор, когато започне да въвежда стойност в съответното поле.</td> </tr><tr><td>макс</td> <td>Позволява ви да ограничите разрешеното въвеждане на цифрови данни до максималната стойност, стойността на атрибута може да съдържа цяло число или дробно число. Препоръчително е този атрибут да се използва заедно с атрибута min. Работи със следните типове полета: число, диапазон, дата, дата и час, дата и час-местен, месец, час и седмица.</td> </tr><tr><td>максимална дължина</td> <td>Атрибутът определя максималния брой знаци, които могат да бъдат въведени в полето. По подразбиране е 524288 знака.</td> </tr><tr><td>мин</td> <td>Позволява ви да ограничите валидното числово въвеждане до минималната стойност.</td> </tr><tr><td>многократни</td> <td>Позволява на потребителя да въведе множество стойности на атрибути, разделени със запетая. Прилага се за файлове и имейл адреси. Посочено без стойност на атрибут.</td> </tr><tr><td>име</td> <td>Указва името, което ще се използва за достъп до елемента <form>например в css таблици със стилове. Аналогично на атрибута id.</td> </tr><tr><td>модел</td> <td>Позволява ви да дефинирате използването <b>регулярен израз</b>синтаксисът на данните, които трябва да бъдат разрешени в конкретно поле. Например, шаблон = "(3) - (3)" - квадратните скоби задават диапазона от валидни знаци, в този случай - всички малки букви, числото в къдравите скоби показва, че са необходими три малки букви, последвани от тире, след това три цифри в диапазона от 0 до 9.</td> </tr><tr><td>заместител</td> <td>Съдържа текста, който се показва в полето за въвеждане преди попълване (най-често това е намек).</td> </tr><tr><td>Само за четене</td> <td>Той не позволява на потребителя да променя стойностите на елементите на формуляра, докато изборът и копирането на текст са достъпни. Посочено без стойност на атрибут.</td> </tr><tr><td>задължително</td> <td>Показва съобщение, че това поле е задължително. Ако потребителят се опита да изпрати формуляра, без да въведе необходимата стойност в това поле, на екрана ще се покаже предупредително съобщение. Посочено без стойност на атрибут.</td> </tr><tr><td>размер</td> <td>Определя видимата ширина на полето в знаци. По подразбиране е 20. Работи със следните типове полета: текст, търсене, телефон, url, имейл и парола.</td> </tr><tr><td>src</td> <td>Указва URL адреса на изображение, което да се използва като бутон за изпращане на данни от формуляр. Посочено само за полето <input type="image"> . </td> </tr><tr><td>стъпка</td> <td>Използва се за елементи, които изискват цифрово въвеждане, показва размера на увеличение или намаляване на стойностите по време на корекция на диапазона (стъпка).</td> </tr><tr><td rowspan="21">Тип</td> <td>бутон - създава бутон. <br><input type="button" value="Бутон"></td> </tr><tr><td>квадратче за отметка - превръща полето за въвеждане в квадратче за отметка, което може да се постави или изчисти, например <br><input type="checkbox" name="vehicle" value="Автомобил">имам кола</td> </tr><tr><td>цвят - Генерира инструменти за избор на цветове в поддържащи браузъри, като дава на потребителите възможността да избират стойности на цветовете в шестнадесетичен формат. <br><input type="color" name="color"></td> </tr><tr><td>дата - позволява да въведете дата във формат дд.мм.гггг. <br>рожден ден: <input type="date" name="birthday"></td> </tr><tr><td>datetime-local - позволява ви да въведете дата и час, разделени с главна английска буква T по образец dd.mm.yyyy hh: mm. <br>Рожден ден - ден и час: <input type="datetime-local" name="birthday"></td> </tr><tr><td>имейл – браузърите, които поддържат този атрибут, ще очакват от потребителя да въведе данни, които съответстват на синтаксиса на имейл адресите. <br>Електронна поща: <input type="email" name="email"></td> </tr><tr><td>файл - позволява ви да качвате файлове от компютъра на потребителя. <br>Изберете файл: <input type="file" name="img"></td> </tr><tr><td>hidden - Скрива контрола, която не се вижда от браузъра и не позволява на потребителя да променя стойностите по подразбиране.</td> </tr><tr><td>изображение - създава бутон, който ви позволява да вмъкнете изображение вместо текста върху бутона. <br><input type="image" src="https://html5book.ru/wp-content/uploads/2015/04/webbutton.png" alt="Изпращане"></td> </tr><tr><td>месец - Позволява на потребителя да въведе годината и месеца с помощта на модела yyyy-mm. <br><input type="month"></td> </tr><tr><td>номер - предназначен за въвеждане на цели числа. Неговите атрибути min, max и step задават съответно горните, долните и интервалите. Тези атрибути се приемат за всички елементи, които имат числови стойности. Техните стойности по подразбиране зависят от типа на елемента. <br>Посочете количеството (от 1 до 5): <input type="number" name="quantity" min="1" max="5"></td> </tr><tr><td>парола - създава текстови полета във формуляра, докато въведените от потребителя знаци се заменят със звездички, куршуми или други икони, зададени от браузъра. <br>Въведете паролата: <input type="password"></td> </tr><tr><td>радио - създава радио бутон - контрол под формата на малък кръг, който може да се включва или изключва. <br>вегетарианец: <input type="radio"></td> </tr><tr><td>диапазон - ще ви позволи да създадете интерфейсен елемент като плъзгач, min / max - ще ви позволи да зададете диапазона на избор <input type="range" min="1" max="10" value="3"></td> </tr><tr><td>нулиране - създава бутон, който изчиства полетата на формуляра от въведените от потребителя данни. <br><input type="reset"></td> </tr><tr><td>търсене - обозначава поле за търсене, по подразбиране полето за въвеждане е правоъгълно. <br>Търсене: <input type="search" name="search"></td> </tr><tr><td>submit - Създава стандартен бутон с възможност за кликване. Бутонът събира информация от формуляра и я изпраща за обработка. <br><input type="submit" value="изпрати"></td> </tr><tr><td>текст - Създава текстови полета във формуляр, извеждайки едноредово текстово поле за въвеждане на текст. <br><input type="text"></td> </tr><tr><td>време - позволява ви да въведете време в 24-часов формат с помощта на шаблона hh: mm. В поддържащи браузъри той се появява като контрола за цифрово въвеждане със стойност, която може да се щракне с мишката и приема само стойности за време. <br>Посочете часа: <input type="time"></td> </tr><tr><td>url - полето е предназначено за определяне на URL адреси. <br>Главна страница: <input type="url" name="homepage"></td> </tr><tr><td>седмица - Подходящият инструмент за указател позволява на потребителя да избере една седмица от годината и след това предоставя въвеждане на данни във формат nn-yyyy. В зависимост от годината, броят на седмиците може да бъде 52 или 53. <br>Посочете седмицата: <input type="week"></td> </tr><tr><td>стойност</td> <td>Указва текста, показан на бутон, в поле или свързан текст. Не е посочено за полета от типа файл.</td> </tr><tr><td>ширина</td> <td>Стойността на атрибута съдържа броя на пикселите. Позволява ви да зададете ширината на полетата на формуляра.</td> </tr></table><h3>4. Полета за въвеждане на текст</h3> <p>елемент <textarea>...използва се вместо елемент когато трябва да създадете големи текстови полета. Текстът, показан като оригинална стойност, се поставя вътре в етикета. Размерите на полето се задават с помощта на атрибутите cols - хоризонтални размери, редове - вертикални размери. Височината на полето може да бъде зададена със свойството височина. Всички размери се изчисляват въз основа на размера на един символ на моноширинен шрифт.

котка

7. Бутони

елемент ...създава бутони с възможност за щракване. За разлика от създадените бутони ( , , , ), вътре в елемента можете да поставите съдържание - текст или изображение.

За правилното показване на елемента

различните браузъри трябва да посочат атрибута type, напр. .

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

8. Квадратчета за отметка и радио бутони във формуляри

С помощта на конструкцията се задават квадратчета за отметка във формуляри и превключвателят с .

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

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

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

Трудно е да се говори за форми в HTML урока. Причината е много проста: много по-лесно е да се създаде HTML форма, отколкото "точката на външния свят", до която HTML формата ще изпраща информация. В повечето случаи такава "точка" е програма, написана на Pearl или C.

Програмите, които обработват данни, изпратени от формуляри, често се наричат ​​CGI скриптове. Съкращението CGI означава Common Gateways Interface. Писането на CGI скриптове в повечето случаи изисква добро познаване на съответния език за програмиране и възможностите на операционната система Unix.

Понастоящем езикът PHP / FI придоби известно разпространение, чиито инструкции могат да бъдат вградени директно в HTML документи (документите се записват като файлове с разширение * .pht или * .php).

HTML формите предават информация към програмите за манипулации под формата на двойки [име на променлива] = [стойност на променливата]. Имената на променливите трябва да бъдат посочени с латински букви. Стойностите на променливите се интерпретират от манипулаторите като низове, дори ако съдържат само числа.

Как работи HTML формуляр

Формулярът се отваря с етикет и завършва с етикета... Един HTML документ може да съдържа няколко форми, но формулярите не трябва да се съдържат един в друг. HTML текстът, включително тагове, може да бъде поставен във формуляри без ограничения.

етикет

Надписът, приложен към бутона, може, ако е необходимо, да бъде предаден на манипулатора чрез въвеждане на атрибута NAME = [name] в дефиницията на бутона (прочетете "name", от английски "name"), например:

Когато щракнете върху такъв бутон, манипулаторът, заедно с всички останали данни, ще получи бутона с променлива със стойност Let's go! ...

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

Как HTML формите събират данни

Има и други видове елементи. ... Всеки елемент трябва да включва атрибута NAME = [name], който дефинира името на елемента (и съответно името на променливата, която ще бъде предадена на манипулатора). Името трябва да бъде дадено само с латински букви... Повечето от елементите трябва да включва атрибута VALUE = "(! LANG: [стойност]" , определяющий значение, которое будет передано обработчику под этим именем. Для элементов !} и този атрибут обаче не е задължителен, тъй като стойността на съответната променлива може да бъде въведена от потребителя от клавиатурата.

Основни типове елементи :

ТИП = текст

Определя прозорец за въвеждане на ред текст. Може да съдържа допълнителни атрибути SIZE = [число] (ширината на прозореца за въвеждане в знаци) и MAXLENGTH = [число] (максималната разрешена дължина на входния низ в знаци).

пример:

Определя прозорец от 20 знака за въвеждане на текст. По подразбиране прозорецът съдържа текста Ivan, който потребителят може да редактира. Редактираният (или нередактиран) текст се предава на манипулатора в потребителската променлива.

ТИП = парола

Определя прозорец за въвеждане на парола. Той е абсолютно подобен на типа на текста, но вместо символи от въведения текст, на екрана се показват звездички (*). пример:

Определя прозорец от 20 знака за въвеждане на парола. Максималната разрешена дължина на паролата е 10 знака. Въведената парола се предава на манипулатора в променливата pw.

ТИП = радио

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

пример:

9600 bps
14400 bps
28800 bps

Дефинира група от три радио бутона, подписани 9600 bps, 14400 bps и 28800 bps. Първият от бутоните първоначално е обозначен. Ако потребителят не провери друг бутон, модемната променлива със стойност 9600 ще бъде предадена на манипулатора. Ако потребителят избере различен бутон, модемната променлива със стойност 14400 или 28800 се предава на манипулатора.

ТИП = квадратче за отметка

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

пример:

Персонални компютри
Работни станции
LAN сървъри
Интернет сървъри

Дефинира група от четири квадрата. Първоначално са маркирани второто и четвъртото квадратче. Ако потребителят не направи никакви промени, две променливи ще бъдат предадени на манипулатора: comp = WS и comp = IS.

ТИП = скрит

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

пример:

Дефинира версията на скритата променлива, която се предава на манипулатора със стойност 1.1.

ТИП = нулиране

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

пример:

Дефинира бутон Изчистване на полетата на формуляра, който връща HTML формуляра в първоначалното му състояние при щракване.

Освен елементите , HTML формите могат да съдържат менюта и полета за въвеждане на текст .</p> <p>Меню <SELECT>от n елемента изглежда така:</p><p> <SELECT NAME="[имя]"> <OPTION VALUE="[стойност 1]">[текст 1] <OPTION VALUE="[стойност 2]">[текст 2] ... <OPTION VALUE="[n стойност]">[текст n]</SELECT> </p><p>Както можете да видите, менюто започва с етикета <SELECT>и завършва с етикета</SELECT>... етикет <SELECT>съдържа необходимия атрибут NAME, който посочва името на променливата, която генерира менюто.</p> <p>етикет <SELECT>може също да съдържа атрибут MULTIPLE, чието присъствие показва, че няколко елемента могат да бъдат избрани от менюто. Повечето браузъри показват менюта <SELECT MULTIPLE>под формата на прозорец, в който се намират елементите от менюто (височината на прозореца в редове може да се зададе от атрибута SIZE = [число]). Меню <SELECT>в повечето случаи се показва като падащо меню.</p> <p>етикет <OPTION>дефинира елемент от менюто. Задължителният атрибут VALUE задава стойността, която ще бъде предадена на манипулатора, ако този елемент от менюто бъде избран. етикет <OPTION>може да включва атрибут checked, показващ, че елементът е проверен по подразбиране.</p> <h3>Нека разгледаме малък пример:</h3> <SELECT NAME="selection"> <OPTION VALUE="Опция 1" checked>Опция 1 <OPTION VALUE="опция 2">Вариант 2 <OPTION VALUE="опция3">Вариант 3</SELECT> <p>Този фрагмент дефинира меню от три елемента: Опция 1, Опция 2 и Опция 3. Опция 1 е избрана по подразбиране. На манипулатора ще бъде подадена променлива за избор, чиято стойност може да бъде опция1 (по подразбиране), опция2 или опция3.</p> <p>След всичко, което научихме досега, елементът <TEXTAREA>може да изглежда доста просто. Например:</p><p> <TEXTAREA NAME=address ROWS=5 COLS=50>А ето ти адреса...

Всички атрибути са задължителни. Атрибутът NAME дефинира името, под което съдържанието на прозореца ще бъде предадено на манипулатора (в примера адрес). Атрибутът ROWS задава височината на прозореца в редове (в примера - 5). Атрибутът COLS задава ширината на прозореца в символи (в примера - 50).

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

Важно е да знаете, че руските букви в прозореца когато се предават на манипулатор, те могат да бъдат преобразувани в съответните им символни обекти.</p> <h3>пример:</h3> <p>За да демонстрирам използването на HTML форми, написах малка PHP програма, разположена на адрес:</p><p>Http://206.31.82.215/hp/nc/fd-win.pht</p><p>Първоначалните данни ще бъдат изпратени на тази програма чрез формата, описана в пример 12:</p><p> <HTML> <HEAD> <TITLE>Пример 12</TITLE> </HEAD> <H1>Малко по-сложна форма</H1> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> <H2>Разкажи ни малко за себе си...</H2> <P>Изобщо не е необходимо да се предоставят автентични данни. За демонстрационни цели, измислените също са добре.</P> <P>име: <INPUT TYPE=text SIZE=40 NAME=fn><BR>фамилно име: <INPUT TYPE=text SIZE=40 NAME=ln><BR>етаж: <INPUT TYPE=radio NAME=gender VALUE="мъжки" checked>мъжки <INPUT TYPE=radio NAME=gender VALUE="женски пол">женски пол <BR>възраст: <INPUT TYPE=text SIZE=5 NAME=age>години <BR> <INPUT TYPE=submit VALUE="Стартиране на манипулатора"></P> </FORM> </BODY> </HTML> </p><p>Попълнете HTML формуляра, щракнете върху бутона и вижте какво се случва...</p> <p><b>Малък трик <br>или как да изпратите формуляра по пощата</b></p><p>Всичко това е страхотно, ще кажат скептиците, но защо се нуждаят от HTML формуляри, които нямат с какво да ги обработват? Това отчасти е вярно, но само отчасти.</p> <p>HTML ви предоставя доста мощен механизъм за изпращане на съдържание от формуляра по имейл. Ето как изглежда на практика.</p> <p>Да кажем, че сме променили леко Пример 12. Вместо реда</p><p> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> </p><p>влязохме в опашката</p><p> <FORM ACTION="mailto:user@mail.box" ENCTYPE=text/plain> </p><p>Моля, обърнете внимание, че променихме алгоритъма за кодиране на текст / обикновен, тоест всъщност изключихме кодирането напълно.</p> <p>Да предположим сега, че потребителят е посочил, първото име е Иван, фамилното име е Петров, мъжкият пол и възрастта е 22 години. Сега въпросът е: какво се случва, ако потребителят щракне върху бутона Run Handler?</p> <p>Отговорът е прост. Следното съобщение ще бъде автоматично изпратено до user@mail.box по имейл:</p><p>Fn = Иван ln = Петров пол = мъжка възраст = 22</p><p>За съжаление, не всички потребители ще могат да използват този HTML формуляр. Факт е, че цялата работа по съставянето на съобщение и стартирането на пощенската програма за изпращането му всъщност се поема от браузъра на потребителя. Това означава, че конфигурацията на интернет достъпа на потребителя трябва да осигури едновременното функциониране на протокола за прехвърляне на хипертекст и протокола за доставка на изходяща поща. Това не винаги е възможно. Въпреки това, дори и това да не е възможно, нищо фатално няма да се случи. Браузърът просто ще ви даде съобщение за грешка.</p> <table width="635" border="0"><tr><td width="200"> </td><td> </td><td width="200"> </td> </tr></table> <p>Добър ден, любителите на уеб разработката и тези, които искат да направят свой собствен уебсайт. Преди това всичките ми публикации бяха посветени на основните елементи на езика, как да създавате различни обекти от съдържание, да ги форматирате, структурирате и т.н. След като овладеете предишните теми, вече можете да създадете доста добър уебсайт. Това обаче би било непълно без днешната тема: „Създаване на формуляри в html“.</p> <p>Този раздел на езика е много важен. Затова обърнете специално внимание на неговото проучване, в противен случай създаденият от вас уеб ресурс не може да бъде пуснат в производство. Така, след като прочетете статията, ще знаете какво ви е необходимо, за да използвате формуляри, с какви тагове са създадени, а също така можете да изпробвате конкретни примери на практика. Да започваме!</p> <h2>Какво е форма и как функционира</h2> <blockquote> <p><b>Формата</b>- това е един от най-важните обекти, който е предназначен за обмен на информационни данни между сървъра и потребителя.</p> </blockquote> <p>Просто казано, ако искате да създадете онлайн магазин с възможност да поръчвате продукти на сайта, да заявите регистрация в уеб ресурс и да работите с акаунти или да предоставите на клиентите обратна връзка от мениджърите на компанията, тогава не можете да правите без формуляри.</p> <blockquote> <p>Формулярът се задава с помощта на специален елемент от html езика <b><form> </b>.</p> </blockquote> <p>Имайте предвид, че един кодов документ може да съдържа множество декларации на етикети <b><form> </b>, обаче, само една заявка може да бъде изпратена до сървъра за обработка на данните. Ето защо информацията, която се въвежда от потребителя в определените за това полета и се отнася до различни форми, не трябва да бъде зависима. Също така не е позволено да се правят формуляри, вложени една в друга.</p> <p>За нетърпеливите и нетърпеливи да разгледат набързо изгледа на кода, приложих прост пример за използване на панел с текстово поле за парола с бутон:</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 7 8 9 10 11 12 </td><td class="code"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример</title> </head> <body> <form> <p><input name="pas" type="password"><input type="submit"></p> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </td> </tr></table><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример</title> </head> <body> <form> <p><input name="pas" type="password"><input type="submit"></p> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html></p> <p>Може би сега не е много ясно какво и как взаимодейства в тази малка програма, но гарантирам, че след като прочетете цялата статия, ще можете да създавате приложения в пъти по-трудни.</p> <h2>Изпращане на данни към страната на сървъра</h2> <p>За да изпратите въведената (или избрана) информация в диалоговия прозорец, трябва да използвате стандартния механизъм - <b>Бутон за изпращане</b>.</p> <blockquote> <p>Кодът за такъв метод изглежда така: <b><input type="submit"> </b></p> </blockquote> <p>При стартиране на представения ред ще се покаже бутон с надпис: "Изпращане".</p> <p>Друг начин за изпращане на данни към страната на сървъра е чрез натискане на Enter в диалоговия прозорец.</p> <p>След потвърждаване на изпращането на посочената информация, тя не отива веднага към сървъра. Първо, той се обработва от браузъра, което води до формата "име = стойност".</p> <p>Параметърът на атрибута е отговорен за името <b>Тип</b>етикет <b><input> </b>, а за стойността - данните, въведени от потребителя. След това трансформираният низ се предава на манипулатора, който най-често се задава в атрибута <b>действие</b>елемент <b><form> </b>.</p> <p>Самият параметър за действие не е задължителен, а в някои моменти изобщо не е необходим. Например, ако страница на сайта е написана с помощта на php или js, тогава обработката се извършва на текущата страница и връзките не са необходими.</p><p>За по-добро разбиране на цялостната картина на функционирането на сайта, бих искал да добавя, че работата с данни на сървъра се извършва с помощта на други езици. И така, езиците от страна на сървъра са: Python, php, C-подобни езици (C #, C и др.), Java и други.</p> <p>Сега бих искал да спра и да ви разкажа повече за елемента <b><input> </b>... С прости думи тогава <b><input> </b>необходими за създаване на текстови полета, радио бутони, различни бутони, скрити полета, квадратчета за отметка и други обекти.</p> <p>Не е необходимо етикетът да се сдвоява <b><form> </b>, обаче, ако трябва да обработите потребителски записи или да ги въведете, например, в база данни, тогава не можете да правите без контейнер.</p> <p>Основните атрибути на този елемент от езика за маркиране на хипертекст са:</p> <ul><li><b>Текст</b>- създава текстово поле;</li> <li><b>Изпращане</b>- създава бутон за изпращане на данни към сървъра;</li> <li><b>Образ</b>- отговаря за бутона със снимка;</li> <li><b>Нулиране</b>- задава бутон за изчистване на формуляра;</li> <li><b>парола</b>- задава текстово поле специално за пароли;</li> <li><b>Квадрат за отметка</b>- отговаря за полетата със знамена;</li> <li><b>Радио</b>- отговаря за полетата с избор на един елемент;</li> <li><b>Бутон</b>- създава бутон;</li> <li><b>Скрит</b>- използва се за скрити полета;</li> <li><b>Файл</b>- задава полето, отговорно за изпращане на файлове.</li> </ul><h2>Методи за пренос на информация</h2> <p>Има 2 начина за прехвърляне на потребителски данни към сървъра: <b>Вземи</b>и <b>Публикувай</b>... Тези методи правят едно и също нещо, но се различават значително един от друг. Ето защо, преди да посочим някой от тях, нека се запознаем с техните характеристики.</p> <table><tbody><tr><td width="260"> </td> <td width="260">Публикувай</td> <td width="260">Вземи</td> </tr><tr><td width="260">Размер на документите за прехвърляне</td> <td width="260">Ограничено до страната на сървъра.</td> <td width="260">Максимум - 4 KB.</td> </tr><tr><td width="260">Как се показва изпратената информация</td> <td width="260">Предлага се само когато се гледа чрез разширения на браузъра или други специални софтуерни продукти.</td> <td width="260">Незабавно достъпни за всички.</td> </tr><tr><td width="260">Използване на отметки</td> <td width="260">Няма начин за добавяне към отметки, тъй като заявките не се повтарят (всички страници се свързват с един и същ адрес).</td> <td width="260">Всяка страница със заявка може да бъде запазена в отметки и да отидете на нея след известно време.</td> </tr><tr><td width="260">Кеширане</td> <td width="260">Въз основа на предишния параграф всички заявки са на една страница.</td> <td width="260">Всяка страница може да се кешира отделно.</td> </tr><tr><td width="260">Целта</td> <td width="260">Използва се за изпращане на големи файлове (книги, изображения, видеоклипове и др.), съобщения, коментари.</td> <td width="260">Чудесно за намиране на искани стойности в уеб ресурс или за изпращане на кратки текстови съобщения.</td> </tr></tbody></table><p>За да се посочи с кой от двата метода за предаване на данни трябва да работи браузърът в елемента <b><form> </b>използвайте предоставения параметър <b>метод</b>(например, <b>метод = "публикация"</b>).</p> <p><img src='https://i2.wp.com/romanchueshov.ru/wp-content/uploads/2016/07/prostaia-forma.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Нека разгледаме втори пример. Нека създадем формуляр, в който трябва да въведете личните си данни (име и фамилия, дата на раждане) и да излезете с парола. След това изпращаме всичко това на сървъра с помощта на метода <b>Публикувай</b>.</p> <p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>POST метод</title> </head> <body> <p>Въведете вашите лични данни!</p> <form action="handler.php" method="post"> <p><input name="name" value = "име"> <input name="fam" value = "Фамилия"> <input type="date" name="calendar" value="2016-06-11" max="2016-07-31" min="2016-06-01"> <input type="password" name="pass" value = "парола"> </p> <p><input type="submit"></p> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html></p> <p>Например за въвеждане на дата има превключватели за датата на всеки от параметрите (ден, месец и година), както и за удобство падащ панел със самия календар.</p> <h2>Създаване на регистрационен панел</h2> <p>Основните тагове и атрибути са прегледани. Ето защо е дошло времето да създадете пълноценен регистрационен формуляр, използвайки стилизирано css маркиране и валидиране на входните данни. Разбира се, няма да можем да разгледаме работата на сървъра с тях, но ще предоставим дизайна и важните детайли.</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 </td><td class="code"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Регистрация</title> <style> </style> </head> <body> <form> <fieldset> <legend>регистрация в сайта</legend> <h4> </h4> <p>име: <input name="name" autofocus required ></p> <p>фамилно име: <input name="fam" required></p> <p>Електронна поща: <input type="email" required></p> <p>парола: <input type="password" name="pass" required></p> <p>Повторение на паролата: <input type="password" name="pass" required></p> <p><input type="submit" value="Регистрирай се сега"></p> </fieldset> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </td> </tr></table><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Регистрация</title> <style> body { background-color:#98FB98; background-attachment: fixed; } form{ background-color:#AEEEEE; Color: #006400; font-size:15px; } h4 { color: red; text-align: center; } p { text-align: center; } input { Color: #006400; font-size:15px; border: 5px ridge #98FB98; background-color:#fff; } </style> </head> <body> <form> <fieldset> <legend>регистрация в сайта</legend> <h4>За последваща коректна работа в нашия сервиз, моля, въведете коректни данни!</h4> <p>име: <input name="name" autofocus required ></p> <p>фамилно име: <input name="fam" required></p> <p>Електронна поща: <input type="email" required></p> <p>парола: <input type="password" name="pass" required></p> <p>Повторение на паролата: <input type="password" name="pass" required></p> <p><input type="submit" value="Регистрирай се сега"></p> </fieldset> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html></p> <p>Съветвам ви да запишете този програмен код в документ с разширение .html и utf-8 кодиране и да отворите последния в прозорец на браузъра. Пред вас ще се появи в целия си блясък панел за регистрация с полета за въвеждане на име, фамилия, e-mail и парола с повторение. Имайте предвид, че когато страницата стартира, курсорът веднага се позиционира в първото текстово поле. Тази техника се постига чрез атрибута <b>автофокус</b>.</p> <p><img src='https://i0.wp.com/romanchueshov.ru/wp-content/uploads/2016/07/krasivai-forma.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Започнете да попълвате полетата, оставяйки едно непроменено и щракнете върху бутона „Регистрация“. Както вече забелязахте, формулярът няма да бъде изпратен, тъй като всеки елемент има <b>< </b><b>въвеждане></b>атрибутът е посочен <b>задължително</b>... Той задава маркираните полета според изискванията.</p> <p>Друг интересен момент е уточняването на типа <b>тип = "имейл"</b>който се появи в. При използване на този тип поле, въведената информация автоматично се проверява за коректност. В случай на грешки, формулярът не се изпраща на сървъра.</p> <p>Така публикацията приключи. В него се опитах да събера максимално количество важни и релевантни знания относно формуляри. Надявам се, че ви е било полезно! Ще бъда много благодарен, ако се присъедините към редиците на моите абонати и разкажете на приятелите си за блога.</p> <p>Чао чао!</p> <p>С най-добри пожелания, Роман Чуешов</p> <p>Прочети: <b>333 пъти</b></p> <p>Формулярите са предназначени да изпращат данни от потребител към уеб сървър. Формулярите в HTML могат да се състоят от текстови полета и текстови области, квадратчета за отметка и радио бутони и падащи списъци. Всичко това са елементи на формата. Всеки елемент служи за предаване на някакъв смисъл на сайта. <br>В основата си HTML формулярът е уеб страница, където виждате области за въвеждане на вашата информация. След като попълните формуляра и щракнете върху бутона за изпращане, информацията от формуляра се пакетира и изпраща на уеб сървъра за обработка от сървърен скрипт (файл манипулатор). След обработка, друга уеб страница ви се връща като отговор. Следната фигура ясно показва как работи формата:</p> <p>Няма нищо трудно в създаването на HTML форми. Най-лесният начин да получите представа за формулярите е да анализирате малко HTML код и след това да видите как работи. Следният пример показва синтаксиса за създаване на прост HTML формуляр:</p> <h3>Пример: Прост HTML формуляр</h3> <ul><li>Опитайте го сами"</li> </ul><p>моята първа форма: <br>име: <input type="text" name="firstname" value=""><br>фамилно име: <input type="text" name="lastname" value=""><br><input type="submit"></p> <p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Проста форма</title> </head><br><body> <form action="action_form.php" method="POST"> <p>моята първа форма: <br>име: <input type="text" name="firstname" value=""><br>фамилно име: <input type="text" name="lastname" value=""><br> <input type="submit"> </p> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body><br></html></p> <h2>елемент <b><form> </b> </h2> <p>Формулярите се вмъкват в уеб страници с помощта на елемента <b><form> </b>... Това е контейнер за цялото съдържание на формуляр, включително елементи като текстови полета и бутони, както и всякакви други HTML тагове. Той обаче не може да съдържа друг елемент. <b><form> </b> .<br>За да изпратите формуляра на сървъра, използвайте бутона "Изпращане", същият резултат ще бъде получен, ако натиснете клавиша "Enter" във формуляра. Ако бутонът „Изпращане“ не присъства във формуляра, за изпращане може да се използва клавиш „Enter“. <br>Повечето атрибути на елемента <b><form> </b>засягат обработката на формуляра, а не неговия дизайн. Най-често срещаните от които са <b>действие</b>и <b>метод</b>... Атрибут <b>действие</b>съдържа URL адреса, на който информацията във формуляра ще бъде изпратена за обработка от сървъра. Атрибут <b>метод</b>е HTTP методът, който браузърите трябва да използват за изпращане на данни от формуляра.</p> <h2>елемент <b><input> </b> </h2> <p>Почти всички полета на формуляра се създават с помощта на елемента <b><input> </b>(от англ. input - въвеждане). Външен вид на артикула <b><input> </b>променят се в зависимост от стойността на неговия атрибут <b>Тип</b>:</p><p> <input type="значение"> </p><p>Ето някои от стойностите на атрибутите <b>Тип</b>:</p> <h2>Въвеждане на текст и парола</h2> <p>Един от най-простите типове елементи на формуляр е текстово поле, което ви позволява да въвеждате текст на един ред. Този тип въвеждане на текст е зададен по подразбиране и следователно това е едноредовото поле, което ще се покаже, ако забравите да посочите атрибута <b>Тип</b>... За да добавите едноредово поле за въвеждане на текст към формуляр, отидете вътре в елемента <b><input> </b>атрибут регистър <b>Тип</b>с текстова стойност:</p><p> <input type="text"> </p><p>Полето за въвеждане на парола е вид обикновено текстово поле. Той поддържа същите атрибути като едноредово текстово поле. Атрибут <b>име</b>задава името на полето за въвеждане на парола, което ще бъде изпратено на сървъра заедно с въведената от потребителя парола. За да създадете поле за въвеждане на парола, трябва да зададете стойността на паролата на атрибута <b>Тип</b>(парола (на английски) - парола):</p><p> <input type="password"> </p><p>Пример за създаване на формуляр с поле за парола:</p> <h3>Пример: поле за въвеждане на парола</h3> <ul><li>Опитайте го сами"</li> </ul><p>Вашето вход: <input type="text" name="login" size="15" maxlength="30" value="Твоето име"></p> <p>парола: <input type="password" name="password" size="15" maxlength="30" value="парола"></p> <input type="submit"><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <p>Вашето вход: <input type="text" name="login" size="15" maxlength="30" value="Твоето име"> </p> <p>парола: <input type="password" name="password" size="15" maxlength="30"> </p> <input type="submit"> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body><br></html></p> <p>Заедно с този атрибут можете да използвате атрибута <b>максимална дължина</b>, чиято стойност определя максималния брой знаци, които могат да бъдат въведени в този низ. Можете също да зададете дължината на полето за въвеждане с помощта на атрибута <b>размер</b>... По подразбиране повечето браузъри ограничават ширината на текстовото поле до 20 знака. За да контролирате ширината на елементите на нови форми, вместо на атрибута <b>размер</b>, се препоръчва използването на средствата за каскадни стилови таблици (CSS). <br>Атрибут <b>стойност</b>задава стойността, която се показва по подразбиране в текстовото поле, когато формулярът се зареди. Като въведете стойност по подразбиране в полето, можете да обясните на потребителя какви данни и в какъв формат искате потребителят да въведе тук. Това е като извадка, защото е много по-удобно за потребителя да попълни формуляра, виждайки пример пред себе си.</p> <h2>Превключватели (радио)</h2> <p>елемент <b><input> </b>Тип <b>радио</b>създава превключватели, които използват логическия принцип "ИЛИ", което ви позволява да изберете само една от няколкото стойности: ако изберете една позиция, тогава всички останали стават неактивни. Основният синтаксис за превключващ елемент е:</p><p> <input type="radio" name="имя _переменной" value="смисъл"> </p><p>Атрибут <b>име</b>е необходим за радио бутоните и играе важна роля при групирането на множество радио бутони заедно. За да комбинирате радиобутони в група, трябва да зададете същата стойност на атрибута <b>име</b>и различни стойности на атрибутите <b>стойност</b>... Атрибут <b>стойност</b>задава стойността на избрания радио бутон, който да бъде изпратен на сървъра. Стойността на всеки бутон за избор трябва да бъде уникална в рамките на групата, така че сървърът да знае кой отговор е избрал потребителят. <br>Присъствие на атрибут <b>проверено</b>(от английски - set) при превключващия елемент показва коя от предложените опции трябва да бъде избрана по подразбиране при зареждане на страницата, ако е необходимо. Този атрибут може да бъде зададен само за един превключващ елемент от групата:</p> <h3></h3> <ul><li>Опитайте го сами"</li> </ul><p>На колко години си?</p> <ol><li><input type="radio" name="age" value="18" checked>под 18</li> <li><input type="radio" name="age" value="18-24">от 18 до 24 ч</li> <li><input type="radio" name="age" value="25-34">от 25 до 35</li> <li><input type="radio" name="age" value="35-50">повече от 35</li> </ol><input type="submit"><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <p>На колко години си?</p> <ol> <li><input type="radio" name="age" value="18" checked>под 18</li> <li><input type="radio" name="age" value="18-24">от 18 до 24 ч</li> <li><input type="radio" name="age" value="25-34">от 25 до 35</li> <li><input type="radio" name="age" value="35-50">повече от 35</li> </ol> <input type="submit"< </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body><br></html></p> <h2>Квадратчета за отметка</h2> <p>елемент <b><input> </b>Тип <b>квадратче за отметка</b>създава квадратчета за отметка, които приличат на радио бутони, тъй като позволяват на потребителя да избира от опциите, които предоставяте. Основната разлика от радио бутоните е, че посетителят може да избере няколко опции наведнъж, а самите флагове са обозначени с квадратчета, а не с кръгове. Както при бутоните за избор, група от квадратчета за отметка се създава, като на всеки елемент се присвоява една и съща стойност на атрибута <b>име</b>обаче всяко поле за отметка има свое собствено значение. Основният синтаксис на квадратчето за отметка е:</p><p> <input type="checkbox" name="имя _переменной" value="смисъл"> </p><p>Атрибут <b>проверено</b>, както при радио бутоните, указва, че квадратчето за отметка трябва да бъде избрано по подразбиране при зареждане на страницата. Този атрибут може да се зададе едновременно за няколко квадратчета за отметка на групата. <br>Следният пример използва квадратчета за отметка, за да зададе множество опции за отговор по подразбиране:</p> <h3>Пример: Използване на превключватели</h3> <ul><li>Опитайте го сами"</li> </ul> <ol><li><input type="checkbox" name="musik" value="juze" checked>Джаз</li> <li><input type="checkbox" name="musik" value="блуза" checked>Блус</li> <li><input type="checkbox" name="musik" value="рок">Рок</li> <li><input type="checkbox" name="musik" value="Шансън">Шансон</li> <li><input type="checkbox" name="musik" value="кантри">Страна</li> </ol><input type="submit"><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <p>Какви жанрове музика харесвате?</p> <ol> <li><input type="checkbox" name="musik" value="juze" checked>Джаз</li> <li><input type="checkbox" name="musik" value="блуза" checked>Блус</li> <li><input type="checkbox" name="musik" value="рок">Рок</li> <li><input type="checkbox" name="musik" value="Шансън">Шансон</li> <li><input type="checkbox" name="musik" value="кантри">Страна</li> </ol> <input type="submit"< </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body><br></html></p> <h2>Бутони за изпращане и нулиране</h2> <p>елемент <b><input> </b>Тип <b>Изпращане</b>създава бутон, който при щракване изпраща браузъра до сървърния скрипт за обработка на данните, въведени от потребителя във формуляра. Ако създадем бутон, който изчиства формуляра, тогава присвояваме на атрибута <b>Тип</b>стойността "нулиране". елемент <b><input> </b>Тип <b>Изпращане</b>може да се присвои незадължителен атрибут <b>име</b>... Атрибут <b>стойност</b>използван в този елемент за определяне на текст, който обозначава етикета на бутона. По подразбиране в браузърите бутонът е изписан "Изпращане", ако не сте доволни от този надпис - въведете го сами. Тъй като стиловете на бутоните за потвърждение могат да се различават в различните браузъри, по-добре е сами да персонализирате стила на бутона с помощта на CSS инструменти или да използвате графични бутони. <br>Създайте бутони за потвърждение и изчистване:</p> <h3>Пример: Използване на изпращане и нулиране</h3> <ul><li>Опитайте го сами"</li> </ul> <input type="text" name="email"><input type="submit" name="podpisatsya" value="Абонирайте се за"><input name="reset" type="reset" value="Ясно"><p>Щракването върху бутона Нулиране нулира всички въведени от потребителя данни.</p> <p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <input type="text" name="email"> <input type="submit" name="podpisatsya" value="Абонирайте се за"> <input name="reset" type="reset" value="Ясно"> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body><br></html></p> <h2>Атрибут за действие.</h2> <p>Основното нещо за елемента <b><form> </b>е атрибут <b>действие</b>който определя манипулатора на данни за формуляра. Манипулаторът на данни е файл, който описва какво да се прави с данните от формуляра. В резултат на тази обработка се връща нова HTML страница и се връща в браузъра. С други думи, в атрибута <b>действие</b>определя URL пътя към файл с манипулатор на сървъра (понякога наричан страница на скрипт) за обработка на формуляра. Синтаксисът е както следва:</p><p> <form action="http://mytestserver.com/namefolder/obrabotchik.php">… </form> </p><p>Файлът за обработка е на сървъра <i>mytestserver.com</i>в папка <i>папка с имена</i>и името на сървърния скрипт, който ще обработва данните - <i>obrabotchik.php</i>... Към него ще бъдат прехвърлени всички данни, въведени от вас във формата на уеб страницата. Разширението .php показва, че посоченият формуляр се обработва от скрипт, написан на езика PHP. Самият манипулатор може да бъде написан на друг език, например, може да бъде скриптовият език Python, Ruby и т.н. <br>Препоръчително е винаги да задавате стойността на атрибута <b>действие</b>... Ако формулярът трябва да изпраща стойности на същата страница, където се намира, посочете празен низ като стойност на атрибута на действие: action = "".</p> <h2>Атрибут на метода</h2> <p>Атрибут <b>метод</b>определя как информацията трябва да се предава към сървъра. Методът, който изберете да изпратите формуляра си, зависи от данните, които искате да изпратите с него. Обемът на тези данни играе важна роля тук. Най-популярните са два метода за прехвърляне на оригиналните данни на вашия формуляр от браузъра към сървъра: <b>ВЗЕМЕТЕ</b>и <b>ПУБЛИКАЦИЯ</b>... Методът е настроен на всеки по ваш избор и ако не сте го посочили, ще се използва по подразбиране <b>ВЗЕМЕТЕ</b>... Нека разгледаме приложението на всеки от тях.</p> <h2>POST метод</h2> <p>Метод <b>ПУБЛИКАЦИЯ</b>пакетира данните от формуляра и ги изпраща на сървъра невидимо за потребителя, тъй като данните се съдържат в тялото на съобщението. Уеб браузър, когато използвате метода <b>ПУБЛИКАЦИЯ</b>изпраща заявка до сървъра, състояща се от специални заглавки, последвани от данните на формуляра. Тъй като съдържанието на тази заявка е достъпно само за сървъра, методът <b>ПУБЛИКАЦИЯ</b>се използва за прехвърляне на поверителни данни като пароли, данни за банкови карти и друга лична информация на потребителите. Метод <b>ПУБЛИКАЦИЯ</b>подходящ и за изпращане на големи количества информация, тъй като за разлика от метода <b>ВЗЕМЕТЕ</b>, няма ограничения за броя на предаваните знаци.</p> <h2>GET метод</h2> <p>Както вече знаете, основната задача на браузъра е да получава уеб страници от сървъра. Така че, когато използвате метода <b>ВЗЕМЕТЕ</b>, вашият браузър просто получава уеб страницата, както винаги. Метод <b>ВЗЕМЕТЕ</b>също обвива данните от формуляра, но ги добавя в края на URL адреса, преди да изпрати заявката до сървъра. За да разберете как работи методът <b>ВЗЕМЕТЕ</b>, нека го видим в действие. Отворете първия пример от този урок (Пример: Прост HTML формуляр) в бележник (например Notepad ++) и направете малка промяна в HTML кода:</p><p> <form action="" method="GET"> </p><p>тези. замени <b>ПУБЛИКАЦИЯ</b>На <b>ВЗЕМЕТЕ</b>.<br>Запазете файла като <i>file_name.html</i>и опреснете страницата на браузъра си (F5), след което попълнете формуляра като <i>Вася Пъпкин</i>, и щракнете върху бутона „Изпращане“. В адресната лента на вашия браузър ще видите нещо подобно:</p><p>File_name.html? Име = Вася и фамилия = Pupkin</p><p>Сега можете да видите името на всеки елемент от формуляр, както и неговата стойност, точно тук в URL адреса. <br>URL адресът е отделен от останалите данни във формуляра с въпросителен знак, а имената и стойностите на променливите са разделени с амперсанд <b>(&) </b>.<br>Този метод трябва да се използва, ако не прехвърляте големи количества информация. <br>Този метод няма да работи, ако данните във вашия формуляр са поверителни, например, той съхранява номер на банкова карта или парола. <br>Също така, методът <b>ВЗЕМЕТЕ</b>неподходящо, ако искате да изпратите файлове на сървъра заедно с формуляра.</p> <h2>Групиране на елементи от формуляр</h2> <p>Елементите на формуляра, които са свързани по значение, могат да бъдат групирани между тагове <b><fieldset> </b>и <b></fieldset> </b>... Браузърът ще се покаже <b><fieldset> </b>като рамка около група от елементи на формата. Външният вид на рамката може да се промени с помощта на каскадни стилови таблици (CSS). <br>За да добавите заглавие за всяка група, имате нужда от елемента <b><legend> </b>, което определя текста на заглавието на групата да бъде в рамката.</p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="clear"></div> </div> </article> <div class='yarpp-related'> <section id="related_posts"> <div class="block-head"> <span>Повече информация по темата</span> <div class="stripe-line"></div> </div> <div class="post-listing"> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/571a732ee955a2711639743db6450735.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Как да върнете iphone в гаранция" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/bg/aifon-po-garantii-kak-sdat-iphone-po-garantii-garantiinye-sroki-posle-obsluzhivaniya/">Как да върнете iphone в гаранция</a></div> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/325042703c89c589248c5093f0723125.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Ние почистваме icloud съхранението от ненужна информация, само работни методи Облачно съхранение на данни iPhone" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/bg/samye-prostye-sposoby-ochistit-hranilishche-icloud-s-iphone-ipad-i/">Ние почистваме icloud съхранението от ненужна информация, само работни методи Облачно съхранение на данни iPhone</a></div> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/cfa4cf11262f7d6224243f297d1ec316.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Xiaomi Mi TV Box - ТВ кутия и медиен плейър За какво е xiaomi TV Box?" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/bg/obzor-xiaomi-mi-box-s---tv-pristavka-i-mediapleer-xiaomi-mi-tv-box---tv-pristavka-i-mediapleer/">Xiaomi Mi TV Box - ТВ кутия и медиен плейър За какво е xiaomi TV Box?</a></div> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/03545fd0bbaab0aa7ce74691315f4bf8.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Калифорния ще бъде домакин на юбилейно представяне на продуктите на Apple Budget iPhone SE2 за развиващите се страни" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/bg/v-kalifornii-proidet-yubileinaya-prezentaciya-produkcii-apple-v/">Калифорния ще бъде домакин на юбилейно представяне на продуктите на Apple Budget iPhone SE2 за развиващите се страни</a></div> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/634f65974320447900fdfeb29989880c.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Схема за сглобяване на OTG флаш устройство от обикновен USB, окабеляване и тайни на pinout на OTG кабел" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/bg/shema-sborki-otg-fleshki-iz-obychnoi-usb-raspaika-i-sekrety/">Схема за сглобяване на OTG флаш устройство от обикновен USB, окабеляване и тайни на pinout на OTG кабел</a></div> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/9c32bd62968335550c3c6babadd7ceb6.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Преинсталирайте mac os на macbook pro" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/bg/pereustanovka-ios-na-mac-pereustanovka-mac-os-na-macbook-pro-kak/">Преинсталирайте mac os на macbook pro</a></div> </div> </section> </div> <div id="comments"> <ol class="commentlist"> <div class='rreekk' rel='15'> <div id="smartrotator_ad_4" onclick="yaCounter40492595.reachGoal ('tizercommentbefore1'); return true;"></div> </div> </ol> <div class="clear"></div> <div id="respond" class="comment-respond"> </div> </div> </div> <aside id="sidebar"> <div class="theiaStickySidebar"> <div class="execphpwidget"> <div id="text-4" class="widget widget_text"> <div class="widget-top"> <span>Полезен</span> <div class="stripe-line"></div> </div> <div class="widget-container"> <div class="textwidget"> <style> .wpp-list li img { -webkit-border-radius: 65px; -moz-border-radius: 65px; border-radius: 65px; } .wpp-list li .post-views { display: block; margin-left: 70px; color: #828283; font-size: 12px; } .wpp-list li .post-views i { font-size: 13px; } .wpp-list li { line-height: 22px !important; } .replacemy { cursor: pointer; } } </style> <ul class="wpp-list"> <li> <div class="replacemy"><img src="/uploads/e081b94b6fda0c9947a98c3d02cf3b0c.jpg" width="65" height="65" title="Как да конфигурирате изключване на вашия компютър по график в Windows!" alt="Как да конфигурирате изключване на вашия компютър по график в Windows!" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/bg/vyklyuchit-kompyuter-v-zadannoe-vremya-windows-10-kak-nastroit-vyklyuchenie/" class=""><br>Как да конфигурирате изключване на вашия компютър по график в Windows!</a></li> <li> <div class="replacemy"><img src="/uploads/5bc4b107b8545cbd6a99e30b42df2140.jpg" width="65" height="65" title="Телевизори и плазмени панели Xiaomi" alt="Телевизори и плазмени панели Xiaomi" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/bg/televizory-i-plazmennye-paneli-xiaomi-televizory-mi-tv-podobno-odnoi/" class=""><br>Телевизори и плазмени панели Xiaomi</a></li> <li> <div class="replacemy"><img src="/uploads/34f556ceb9f52fb80242f51cc09db32f.jpg" width="65" height="65" title="Няма нищо по-добро, аз отдавна избирам" alt="Няма нищо по-добро, аз отдавна избирам" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/bg/nichego-luchshe-net-ya-dolgo-vybiral-chasy-mechty-nichego-luchshe-net-ya/" class=""><br>Няма нищо по-добро, аз отдавна избирам</a></li> <li> <div class="replacemy"><img src="/uploads/656dd6fb957e1fbfc72b966c3933d30f.jpg" width="65" height="65" title="JBL Charge - звукът, който винаги е с вас JBL charge 2 се възпроизвежда от едната страна" alt="JBL Charge - звукът, който винаги е с вас JBL charge 2 се възпроизвежда от едната страна" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/bg/jbl-charge-zvuk-kotoryi-vsegda-s-soboi-jbl-charge-zvuk-kotoryi-vsegda-s/" class=""><br>JBL Charge - звукът, който винаги е с вас JBL charge 2 се възпроизвежда от едната страна</a></li> <li> <div class="replacemy"><img src="/uploads/7904245d1647ffc06d7a23bcd7362e61.jpg" width="65" height="65" title="JBL Charge - звукът, който винаги е с вас Column JBL Charge 2" alt="JBL Charge - звукът, който винаги е с вас Column JBL Charge 2" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/bg/jbl-charge-zvuk-kotoryi-vsegda-s-soboi-jbl-charge-zvuk-kotoryi/" class=""><br>JBL Charge - звукът, който винаги е с вас Column JBL Charge 2</a></li> </ul> </div> </div> </div> </div> </div> <div> </div> </aside> <div class="clear"></div> </div> <footer id="theme-footer"> <div id="footer-widget-area" class="wide-narrow-2c"><div id="footer-first" class="footer-widgets-box"><div id="text-2" class="footer-widget widget_text"><div class="footer-widget-top"></div><div class="footer-widget-container"><div class="textwidget"> <p>Всичко за съвременните технологии. Грешки. игри. Разбивки. Техника. интернет <p></p> </div></div></div></div><div id="footer-second" class="footer-widgets-box"><div id="text-3" class="footer-widget widget_text"> <div class="footer-widget-top"></div> <div class="footer-widget-container"> <div class="textwidget"><a href="https://qzoreteam.ru/bg/sitemap.xml">карта на сайта</a></div> </div> </div><div id="text-7" class="footer-widget widget_text"><div class="footer-widget-top"></div><div class="footer-widget-container"><div class="textwidget"><br> <a href="">Обратна връзка</a> </div></div></div></div></div><div class="clear"></div> </footer> <div class="clear"></div> <div class="footer-bottom"> <div class="container"> <div class="alignright"></div> <div class="alignleft">© Авторско право 2017, https://qzoreteam.ru</div> <div class="clear"></div> </div> </div> </div> </div> </div> <div id="topcontrol" class="fa fa-angle-up" title="Отидете в горната част на страницата"></div> <div id="fb-root"></div> <script type="text/javascript"> jQuery(function($) { $(document).on("click", ".pseudo-link", function() { window.open($(this).data("uri")); }); }); </script> <script type='text/javascript'> /* */ var tocplus = { "smooth_scroll": "1", "visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c", "width": "310px" }; /* */ </script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/table-of-contents-plus/front.min.js'></script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/wp-polls/polls-js.js'></script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/wp-postratings/js/postratings-js.js'></script> <script type='text/javascript'> /* */ var tie = { "mobile_menu_active": "true", "mobile_menu_top": "", "lightbox_all": "", "lightbox_gallery": "", "woocommerce_lightbox": "", "lightbox_skin": "dark", "lightbox_thumb": "vertical", "lightbox_arrows": "true", "sticky_sidebar": "", "is_singular": "1", "SmothScroll": "true", "reading_indicator": "", "lang_no_results": "\u041d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u0448\u043b\u043e\u0441\u044c", "lang_results_found": "\u041d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b" }; /* */ </script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/themes/pochk/js/tie-scripts.js'></script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/themes/pochk/js/ilightbox.packed.js'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js'></script> <script type='text/javascript'> /* */ var gglcptch_pre = { "messages": { "in_progress": "\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0434\u043e\u0436\u0434\u0438\u0442\u0435\u0441\u044c \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 Google reCAPTCHA.", "timeout": "\u041d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c Google reCAPTCHA. \u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0412\u0430\u0448\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a \u0441\u0435\u0442\u0438 \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u044d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443." } }; /* */ </script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/google-captcha/js/pre-api-script.js'></script> <script type='text/javascript' data-cfasync="false" async="async" defer="defer" src='https://www.google.com/recaptcha/api.js?onload=gglcptch_onload_callback&render=explicit'></script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/google-captcha/js/script.js'></script> <script type="text/javascript" src="https://qzoreteam.ru/wp-content/themes/pochk/my/my.js"></script> <script type="text/javascript" src="https://qzoreteam.ru/wp-content/themes/pochk/my/etimer.js"></script> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html>