ФОРМАЛАР

Форма
Мәтінді енгізу өрісі
Таңдау ұяшығы
Радио түйме
Мәтіндік аумақ
Тізім
Пішін беру

Пішіндер веб-беттерге <form>элементі арқылы енгізіледі. Ол мәтін ұяшықтары мен түймелер сияқты элементтерді, сондай-ақ кез келген басқа HTML тіл тегтерін қоса, пішіннің барлық мазмұнына арналған контейнер болып табылады. Алайда, < form> ол басқа элементті қамтуы мүмкін емес .

Серверге пішінді жіберу үшін " Submit "батырмасы қолданылады, егер сіз формадағы" Enter "бастырмасын бассаңыз, дәл осындай нәтиже шығады. Егер "Submit" батырмасы формада болмаса, жіберу үшін "Enter" пернесін пайдалануға болады.
<Form > элементінің көптеген атрибуттары оның дизайнына емес, пішіннің өңделуіне әсер етеді.

Ең көп тарағандары-action және method. Action атрибутында пішіндегі ақпарат сервер өңдеуге жіберілетін URL мекенжайы бар. Method атрибуты-бұл http әдісі, оны браузерлер форма деректерін жіберу үшін қолдануы керек.

<input>

Пішінге арналған барлық дерлік өрістер <input > элементінің көмегімен жасалады (ағылш. input-енгізу). <Input > элементінің көрінісі оның type атрибутының мәніне байланысты өзгереді:

<input type="мән">
type төлсипаты үшін мәндер

Мәні

Сипаттамасы

text

Мәтіннің бір жолын енгізу

radio

password

checkbox

submit

reset

button

Ауыстырғыш элемент (кейде радио түймелері деп аталады)

Барлық енгізілген таңбалар жұлдызшамен ауыстырылатын құпия сөзді енгізуге арналған мәтіндік өріс

Құсбелгіні қоюға немесе алып тастауға болатын өріс

Басқан кезде пішінге енгізілген деректерді жіберетін түйме

Басқан кезде бүкіл пішінді тазартатын түйме. Дәлірек айтқанда, барлық пішін элементтері әдепкі мәндерді алады.

Қарапайым командалық тәрмен(кнопка)

Мәтін мен құпия сөзді енгізу

Пайдаланушылардан мәтін алу үшін қолданылатын негізгі элементтердің бірі - <enter>элементі. <Input > элементі басқару элементінде қандай ақпарат түрін түсіру керектігін анықтау үшін type атрибутын пайдаланады. Type атрибутының ең танымал мәні-енгізілген мәтіннің бір жолын білдіретін мәтін.

Type атрибутын орнатумен қатар, <input > элементіне name атрибутын тағайындаған дұрыс. Name атрибутының мәні басқару элементінің атауы ретінде пайдаланылады және серверге кіріс деректерімен бірге беріледі.

<input type="text" name="username">

<Input> элементі дербес, яғни ол тек бір тегті пайдаланады және басқа мазмұнға жол бермейді. Элементтің мәні оның атрибуттарымен және оларға сәйкес мәндермен анықталады.

Бастапқыда типтік атрибуттардың тек екі мәтіндік мәні text және password болды (құпия сөзді енгізу үшін); дегенмен, HTML5 өзімен бірге бірнеше жаңа типтік атрибут мәндерін алып келді.

Бұл мәндер кірістердің мағыналық мәнін нақтылау үшін, сондай-ақ пайдаланушылар үшін жақсы бақылауды қамтамасыз ету үшін қосылды. Егер шолғыш HTML5 типті атрибуттың осы мәндерінің бірін түсінбесе, ол автоматты түрде мәтін атрибутының мәніне оралады. Төменде HTML5 енгізудің жаңа түрлерінің тізімі берілген.

color
date
datetime
email
month
number
range
search
tel
time
url
week

Мәтіндік деректерді түсіру үшін қолданылатын тағы бір элемент - < textarea > элементі. <Textarea > элементінің <input> элементінен айырмашылығы, ол бірнеше жолды қамтитын мәтіннің үлкен бөліктерін қабылдай алады.

< Textarea > элементінде қарапайым мәтінді тасымалдай алатын бастапқы және соңғы тегтер бар. < Textarea > элементі тек бір мән түрін қабылдайтындықтан, type атрибуты мұнда қолданылмайды, бірақ name атрибуты қолданылады.

<textarea name="komentarii orny">Кез-келген пікірді қалдыра аласыз</textarea>.

<Textarea > элементінде екі өлшем атрибуты бар: ені үшін бағандар таңбаның орташа ені бойынша және биіктігі үшін жолдар көрінетін мәтін жолдарының саны бойынша. Мәтін аймағының өлшемі көбінесе CSS-тегі кең және биік қасиеттермен анықталады.

Радио түймелері - пайдаланушыларға опциялардың шағын тізімінен жылдам таңдау жасауға мүмкіндік беретін оңай әдіс. Радио түймелері пайдаланушыларға бірнеше опциялардан айырмашылығы тек бір опцияны таңдауға мүмкіндік береді.

Радио түймені жасау үшін <input>элемент typeрадионың атрибут мәнімен пайдаланылады. Әрбір радио түйме элементі nameтоптағы барлық түймелер бір-біріне сәйкес келетіндей төлсипат мәніне ие болуы керек.

Мәтінге негізделген енгізулермен енгізудің мәні пайдаланушы не енгізетінімен анықталады; радио түймелері арқылы пайдаланушы бірнеше таңдауды таңдайды. Осылайша, біз кіріс мәнін анықтауымыз керек. Атрибутты пайдалана отырып value, біз әрбір <input>элемент үшін белгілі бір мән орната аламыз.

Сонымен қатар, пайдаланушылар үшін радио түймені алдын ала таңдау үшін логикалық атрибутты тексеруге болады.

<input type="radio" name="day" value="Нархоз" checked> Нархоз
<input type="radio" name="day" value="КазГу"> КазГу
<input type="radio" name="day" value="НУ"> НУ

Құсбелгілер радио түймелеріне өте ұқсас. Олар type төлсипат мәні ретінде құсбелгіні қоспағанда, бірдей атрибуттар мен үлгілерді пайдаланады. Екеуінің айырмашылығы мынада: құсбелгілер пайдаланушыларға бірнеше мәндерді таңдауға және олардың барлығын бір басқару атына байланыстыруға мүмкіндік береді, ал радио түймелері пайдаланушыларды бір мәнге шектейді.

<input type="checkbox" name="Univer" value="Нархоз" > Нархоз
<input type="checkbox" name="Univer" value="КазГу"> КазГу
<input type="checkbox" name="Univer" value="НУ"> НУ

Ашылмалы тізімдер(Drop-Down Lists) пайдаланушыларға опциялардың ұзақ тізімін практикалық түрде ұсынудың тамаша тәсілі болып табылады. Әртүрлі опциялар тізімінің жанындағы радио түймелерінің ұзын бағанасы тек көзге ұнамды емес, пайдаланушылар үшін, әсіресе мобильді құрылғыдағыларды түсіну қиын. Екінші жағынан, ашылмалы тізімдер опциялардың ұзақ тізімі үшін тамаша пішімді қамтамасыз етеді.

Ашылмалы тізімді жасау үшін <select> және <option > элементтерін қолданамыз. <Select > элементі барлық мәзір параметрлерін орайды, сонымен қатар әрбір мәзір опциясы <option> элементімен белгіленеді.

Name атрибуты <select> элементінде, ал value атрибуты <select> элементіне енгізілген < option > элементтерінде болады. Әрбір элемент үшін - мән атрибуты < option> содан кейін <select>элементі үшін name атрибутына сәйкес келеді.
Әрбір элемент <option> тізімдегі жеке опцияның мәтінін (пайдаланушыларға көрінетін) орайды.

Қосқыштар мен құсбелгілер үшін белгіленген логикалық атрибут сияқты, ашылмалы мәзірлер пайдаланушылар үшін опцияны алдын ала таңдау үшін таңдалған логикалық атрибутты қолдана алады.

<select name="Arturli">
<option value="Stol" selected>Stol</option>
<option value="Led Ekran">Led Ekran</option>
<option value="Kitap">Kitap</option>
<option value="Esik">Esik</option>
<option value="Computer">Computer</option>
<option value="Myshka">Myshka</option>
<option value="Banner">Banner</option>
</select>

Стандартты ашылмалы тізім үшін <select> элементіне қосылған multiple логикалық атрибуты пайдаланушыға тізімнен бір уақытта бірнеше опцияны таңдауға мүмкіндік береді. Сонымен қатар, мәзірдегі бірнеше элементте таңдалған логикалық атрибутты пайдалану бірнеше <option> алдын ала таңдауға мүмкіндік береді.

<Select> элементінің өлшемін CSS көмегімен реттеуге болады және бірнеше опцияны таңдау мүмкіндігін қамтамасыз ету үшін оны сәйкесінше реттеу керек. Пайдаланушыларға бірнеше опцияны таңдау үшін басқан кезде Shift пернесін басып тұру керек екенін хабарлау қажет болуы мүмкін.

<select name="Arturli" multiple>
<option value="Stol" selected>Stol</option>
<option value="Led Ekran">Led Ekran</option>
<option value="Kitap">Kitap</option>
<option value="Esik">Esik</option>
<option value="Computer">Computer</option>
<option value="Myshka">Myshka</option>
<option value="Banner">Banner</option>
</select>

Пайдаланушы сұралған ақпаратты енгізгеннен кейін түймелер пайдаланушыға бұл ақпаратты іс жүзінде қолдануға мүмкіндік береді. Көбінесе деректерді өңдеу үшін енгізу немесе жіберу түймесі қолданылады.

Енгізуді жіберу (Submit Input)

Пайдаланушылар пішінді толтырғаннан кейін деректерді өңдеу үшін Жіберу батырмасын басады. Submit батырмасы submit type атрибутының мәні бар <input > элементі арқылы жасалады. Мән атрибуты батырмада көрсетілген мәтінді көрсету үшін қолданылады.

<input type="submit" name="batyrma" value="Жіберу">

< Input> элемент ретінде жіберу түймесі автономды болып табылады және кез келген басқа мазмұнды орау мүмкін емес. Егер кіріс деректерінің құрылымы мен дизайнын көбірек бақылау және басқа элементтерді орау мүмкіндігі қажет болса, <button> элементті пайдалануға болады.

< button> Элемент submit type атрибутының мәні бар элемент сияқты <input> сияқты жұмыс істейді; дегенмен, ол басқа элементтерді қоршай алатын ашу және жабу тегтерін қамтиды. Әдепкі бойынша < button> элемент submit типті атрибут мәні бар сияқты әрекет етеді, сондықтан егер қаласаңыз, атрибут пен type мәнін <button> элементінен алып тастауға болады.

Мәтінді басқару үшін мән атрибутын пайдаланудың орнына жіберу түймесі элементтің <button> ашу және жабу тегтері арасында көрсетілетін мәтінді көрсетеді.

<button name="batyrma">Жіберу </button>

Презентация

Сабақтың презентациясын төменгі сілтемеге өтіп
жүктей аласыздар

Жүктеу