რობოტის შექმნა ფორმებით html-ში. აირჩიეთ სიიდან HTML-ში ჩამოსაშლელი სია HTML-ში ნაჩვენებია მხოლოდ ერთი

ძალიან ხშირად, ვებგვერდებზე დარეგისტრირების ან გამოკითხვების შევსებისას, გთხოვენ რაიმეს გაკეთებას აირჩიეთ სიიდან. მაგალითად, აირჩიეთ თქვენი ქვეყანა მრავალი სხვა ქვეყნიდან. ფორმის ყველა მყარი ელემენტი, ისინი შეიძლება განსხვავებულად იყოს შექმნილი: მარტივიდან HTML5დასაკეცი CSS3.

დღეს ჩვენ გადავხედავთ ერთ-ერთ ამ აპლიკაციას შერჩევის ველის შესაქმნელად, HTML/CSSდა ხატი შრიფტი გასაოცარია. ჯერ დავიწყოთ დოკუმენტის მარკირებით.

HTML კოდი

ტეგის შუაში აირჩიეთგაეცანით ნივთებს შემთხვევით სიაში ვარიანტი. გქონდეთ საკუთარი ჩერგუ, ტეგები აირჩიეთі ფორმადეპოზიტები ცეცხლის კონტეინერში დივ. მონიშნეთ ფორმამე ვარ დამნაშავე, მაგრამ სავალდებულო, რადგან მონაცემები მომავალში გადაეგზავნება სერვერს.

პოზიციონირებადი კონტეინერი კლასით ყუთიცენტრში არის ფანჯარა.

ყუთი (
პოზიცია: აბსოლუტური;
ზედა: 50%;
მარცხენა: 50%;
transform: translate(-50%, -50%);
}

შემდეგი, ჩვენ ვუკავშირდებით ხატის შრიფტს თეგს, რომელიც იხურება თავი.

სელექტორის სტილი

ჩვენ დავაყენეთ შერჩევის ველის ზომა - 250x50 პიქსელი და წერტილების ველი 10 პიქსელზე ყველა მხრიდან.

ყუთის არჩევა (
სიგანე: 250px;
სიმაღლე: 50px;
padding: 10px;
}

მოდით ავირჩიოთ ჩარჩო და გავაფორმოთ:

საზღვარი: არცერთი;
მონახაზი: არცერთი;

სიების შრიფტის ფონს, სათაურს, ფერს და ზომას ვანიჭებთ მეწამულ ფერს.

ფონი: #ab05af;
font-family: "Russo One", sans-serif;
ფერი: #fff;
შრიფტის ზომა: 20px;

ჩვენ ვქმნით ჩრდილს მოედნის გარშემო.

Box-shadow: 0 5px 20px rgba(0,0,0,.3);

Ზოგადად აირჩიეთ ყუთიმზადაა და მუშაობს, მაგრამ დამღლელი ჩანს, ისეთი ნაქსოვი ნაჭერი, რომლის ჭამა პატარა დათვსაც კი დასჭირდება. და თუ მე ასე ვიფიქრე, ეს ნიშნავს, რომ დიზაინერი იფიქრებს, რომ აუცილებელია წინასწარ მოემზადოს სხვადასხვა ვარიანტებისთვის.

ყველაზე სასურველი დიზაინერი იქნება ხატის ჩასმა შრიფტში შრიფტი გასაოცარია.

ის ბევრად უფრო ლამაზად გამოიყურება, მაგრამ კოდის დაწერას მაინც სჭირდება განლაგების დიზაინერი. როგორ მივიღოთ აქ გადაწყვეტილება? ჩვენ არ გვაინტერესებს HTML კოდიდა vikorystvo ფსევდოელემენტი ადრე.

წინა ფსევდოელემენტი .box-ისთვის

პირველი რაც უნდა გააკეთოთ არის ხატის კოდის ჩაწერა და შრიფტით დასახელება "Font Awesome 5 უფასო". აირჩიეთ საიტზე fontawesome.comთქვენ დაგჭირდებათ ხატი, რომელიც ნიშნავს "აირჩიეთ" და დააკოპირეთ კოდი.

.ყუთი::ადრე (
შინაარსი: "\f150";
font-family: "Font Awesome 5 Free";
პოზიცია: აბსოლუტური;
ზედა: 0;
მარჯვნივ: 0;
სიგანე: 50px;
სიმაღლე: 50px;
ტექსტის გასწორება: ცენტრში;
ხაზის სიმაღლე: 50px;
ფერი: #fff;
შრიფტის ზომა: 28px;
ფონი: #da00e0;
პოინტერ-მოვლენები: არცერთი;
}

შემდგომი პოზიციონირება არის აბსოლუტურად, მითითებული ზომა არის 50x50, ხატისთვის თეთრი ფერი, ღია მეწამული ფონი. ჩვენ ვითხოვთ თუნდაც მნიშვნელოვან ავტორიტეტს პოინტერ-მოვლენები: არცერთი. ეს ნიშნავს, რომ ფსევდოელემენტი ადრეარა სამიზნის ობიექტი, არამედ მნიშვნელობა არცერთიგვთავაზობს „სამიზნის არჩევის“ პროცესს ქვედა ბურთზე გადასასვლელად და მის ქვეშ მყოფ ელემენტზე გადახვევისთვის - პატარა ტრიკუტზე. ტრიკუტნიკმა არაფერი იცის, ის უბრალოდ ფსევდოელემენტის ქვეშ ცხოვრობს ადრე, რომელიც გაფორმების ფუნქციას შეასრულებდა. მშვენიერ დასასრულზე დაწკაპუნებით ჩვენ რეალურად ვითხოვთ "მახინჯ" მაისურს და ვფრთხილობთ ჩვენს არჩევანზე.

window.onresize = …;

ფანჯრის ობიექტის onresize ფუნქცია საშუალებას გაძლევთ შეცვალოთ ბრაუზერის ფანჯრის ზომა. ამიტომ, მიზანშეწონილი იქნებოდა window ობიექტის მინიჭება window .

ვინაიდან html ელემენტების შუაში არ არის ბრაუზერის ფანჯარაში შედგენილი ტეგი, შეგიძლიათ JavaScript-ში onresize ფუნქცია განახორციელოთ ფანჯრის ობიექტის დამატებითი ენერგიის ფუნქციის გამოყენებით.

მოდით შევხედოთ კონდახს:

კონდახი:დაწერეთ სკრიპტი, რომელიც გამოიწვევს შეტყობინებას ფანჯრის ზომის შეცვლისას "ფანჯრის ზომა შეიცვალა!"

სკრიპტი:

window.onresize = ფუნქციის შეტყობინება() (გაფრთხილება ("ფანჯრის ზომა შეიცვალა!");)

HTML კოდი:

იყავით კეთილი, შეცვალეთ ფანჯრის ზომა.

javascript ობიექტების სია, რომელიც იშლება - აირჩიეთ

შერჩეული ობიექტი არის არჩეულის სია - უზრუნველყოფს შერჩევის მნიშვნელობების ჩამონათვალს. თქვენ შეგიძლიათ აირჩიოთ ერთი ან რამდენიმე ელემენტი ერთდროულად. ეს დასაკეცი ობიექტი, რომელიც იქმნება სკრიპტში, ემატება შერჩეულ ობიექტს და ოფციონის ელემენტს.

ობიექტის არჩევის ძალა:

სიგრძე - სიაში არსებული ნივთების რაოდენობა

სახელი - სახელის ატრიბუტი

პარამეტრები - ნივთების მასივი

SelectIndex - არჩეული ვარიანტის ინდექსი

defaultSelected - აირჩიეთ პარამეტრის პუნქტი დასაყენებლად

შერჩეული - ვიბრატორის ელემენტი

თქვენ შეგიძლიათ წაშალოთ სიის მნიშვნელობა (არჩევა) Javascript-ში მნიშვნელობის სიმძლავრის გამოყენებით. ასევე არსებობს სხვა მეთოდებიც.

მოდით შევხედოთ კონდახს:

კონდახი:განათავსეთ სია, რაც მიეკუთვნება სამ წერტილს - ქალაქებს: მოსკოვი, სანქტ-პეტერბურგი, სხვა. ღილაკზე დაწკაპუნებით აირჩიეთ სიიდან არჩეული ვარიანტის (პუნქტის) სიმძლავრის მნიშვნელობა და აჩვენეთ იგი ეკრანზე.

HTML კოდი:

<ფორმის სახელი = "f1" >მდებარეობა:<br> <აირჩიეთ სახელი = "ქალაქი" id = "s1" > <ვარიანტის მნიშვნელობა = "msk" > !}!}მოსკოვი</ვარიანტი> <ვარიანტის მნიშვნელობა = "spb" > !}!}სანქტ-პეტერბურგი</ვარიანტი> <ვარიანტის მნიშვნელობა = "სხვა" > !}!}სხვა</ვარიანტი> </არჩევა> <შეყვანის ტიპი = "ღილაკი" onclick = "f()" მნიშვნელობა = "ok" > !}!} </ფორმა>

ღირებულების იდენტიფიკაცია სიაში:

ფუნქცია f() (var a= document.getElementById ("s1") .value; alert(a) ;)

ფუნქცია f())( var a=document.getElementById("s1").მნიშვნელობა; alert(a); )

მენეჯერი js13_1.სიის ელემენტის შეცვლისას დაამატეთ ტექსტი მენიუს არჩეული ელემენტიდან (ვარიანტი) ტექსტის ველში.

დეტალები:

დაამატეთ ტექსტის ველი და არჩევის სია ოფციების ელემენტებით და ტექსტით.
ტეგისთვის, რომელიც ხსნის არჩევის მრუდს, დაამატეთ აღწერა onchange-ისთვის.
აჩვენეთ onchange ხელმოწერა ფუნქციით, რომელიც ცვლის ტექსტს ტექსტურ ველში (შეათავსეთ მენიუს არჩეული ელემენტის მნიშვნელობა ტექსტის ველში).

კოდის დამატება:

სკრიპტი:

ფუნქცია check() ( document.getElementById ("t1" ) .value = ...; )

ფუნქცია check() (document.getElementById("t1").value= ...; )

<შეყვანის ტიპი = "ტექსტი" id = "t1" > <br> <აირჩიეთ id = "menu1" onchange = "..." > <ვარიანტის მნიშვნელობა = "1" > 1</ვარიანტი> <ვარიანტის მნიშვნელობა = "2" > 2</ვარიანტი> <ვარიანტის მნიშვნელობა = "3" > 3</ვარიანტი> </არჩევა>

მენეჯერი js13_2.შექმენით მხარე თქვენი კვების ცოდნის შესამოწმებლად: "რომელი დანაყოფები კვდებიან რობოტებში?"და ორი სიტყვა: "მილი"(არასწორი) რომ "ჯული"(სწორი), ვიკისახელი, როგორც მენიუს ელემენტი სიით (არჩევა). დაიწყეთ გადამოწმების ფუნქცია

მოდით შევხედოთ ობიექტის არჩევის სიმძლავრის მაგალითს - selectIndex - select item ოფცია:

კონდახი:შეიყვანეთ არჩეული ალტერნატივის ინდექსი ტექსტურ ველში:

რომელი აპლიკაციისთვის, მენიუს ელემენტის შეცვლისას, იქმნება შეტყობინება onChange. onChange ატრიბუტის მნიშვნელობის შედეგად ხდება სკრიპტის კომპილაცია: ის ითარგმნება ტექსტურ ველში ფორმის ელემენტების მასივის მეშვეობით (ტექსტური ველი არის მასივის პირველი ელემენტი, რადგან 0-ე ელემენტი არის არჩევის სია, რომელიც გამოდის). ტექსტური ველის მნიშვნელობა მითითებულია არჩეული სიის ნომრით (selectedIndex).

javascript ოფციონის ობიექტი - მენიუს ელემენტი

მენიუს არჩევა javascript-ში - ოფცია - განიხილება, როგორც ცალკე ობიექტი თავისი ძალებით:

მენიუს კონკრეტულ ელემენტზე წვდომა მიიღწევა მეშვეობით კოლექციის (მასივის) ვარიანტები:

<ფორმის სახელი = "f1" > <აირჩიეთ სახელი = "s1" > <ვარიანტის მნიშვნელობა = "1" > 1</ვარიანტი> <ვარიანტის მნიშვნელობა = "2" > 2</ვარიანტი> <ვარიანტის მნიშვნელობა = "3" > 3</ვარიანტი> </არჩევა>

მოდით შევხედოთ vikoristan power text ობიექტის პარამეტრის კონდახს:

კონდახი:სიის შერჩევის შეცვლისას ტექსტის ველში შეიყვანეთ ტექსტი შერჩეული სიის ალტერნატიულიდან

<ფორმა > <აირჩიეთ id = "s1" onChange = "document.getElementById("t1").value= document.getElementById("s1").options.text;"> <ვარიანტი >გაზი<ვარიანტი >ვაზ</არჩევა> <შეყვანის ტიპი = "ტექსტი" id = "t1" > </ფორმა>

მოდით შევხედოთ კიდევ ერთ გამოსავალს სიმრავლის შერჩევის სიიდან:

კონდახი:მრავალჯერადი არჩევანის სიის შეცვლისას ტექსტური ფანჯარა აჩვენებს არჩეული ალტერნატივების ინდექსებს
(ჩასვით სიის მრავალი ატრიბუტი)

<ფორმა >საკანცელარიო ნივთების ნაკრები:<აირჩიეთ onChange = "form.elements.value=""; for(i=0;i<6;i++) if(form.elements.options[i].selected==true) form.elements.value = form.elements.value+i;"მრავალჯერადი> <ვარიანტი >ოლივცი<ვარიანტი >შადრევანი კალმები<ვარიანტი >მმართველები<ვარიანტი >ზოშიტი<ვარიანტი >საშლელები<ვარიანტი >ღილაკები</არჩევა>აირჩიეთ პოზიციები:<შეყვანის სახელი = "s1" ზომა = "7" მაქსიმალური სიგრძე = "7" > </ფორმა>

კონდახი:

კონდახი:აბზაცზე (p tag) დაწკაპუნებით, შეცვალეთ ამ ტეგის ტექსტი და განათავსეთ ტექსტი ახალში

<p დააწკაპუნეთ = "this.outerHTML="

შეცვლილი ტექსტი</p>"">zminny ნაცვლად</p>

შეცვლილი ტექსტი

"">zminny ნაცვლად

როგორ ზრუნავთ თქვენი ამჟამინდელი ვებსაიტის დიზაინზე? გძულთ სხვა ტექნოლოგიები თუ გეშინიათ მათი? შესაძლოა, ფიქრობთ, რომ ეს ძალიან რთულია და არ გინდათ სადმე წასვლა. მაგრამ სინამდვილეში ყველაფერი ბევრად განსხვავებულია. ახალი ტექნოლოგიებიც კი (მე მიყვარს CSS3) მოვიდა, რათა გაუადვილოს ვებ დიზაინერის ცხოვრება და შემოიტანოს მათი დამატებითი შესაძლებლობები საიტის ახალი იერსახის შესაქმნელად. დღეს ჩვენ ვისაუბრებთ რამდენიმე ტიპის დიზაინზე, რომლებიც მოცემულია სიაში.

საიტისთვის ხელმისაწვდომი ნივთების სია

არ არის ყველაზე მარტივი გამოსავალი, რაც მე ვნახე ამ ბედში 🙂:

მოზიდვა

რაც მინდა ვთქვა დაუყოვნებლივ დემო დისკიდან არის ის, რომ სიის მთელი ტიპი განთავსებულია ცალკეულ HTML ფაილში, რაც აადვილებს თქვენთვის საჭირო კოდის აღებას. ასევე შემდეგ ფაილებში არის სხვადასხვა სტილის კანის დიზაინი სიაში. თქვენ აღარ მოგიწევთ აირჩიოთ ის, რომელიც საუკეთესოდ ჯდება და იპოვოთ თქვენი სტილის ფაილი.

სიაში უჩვეულო არაფერია:

1 2 3 4 5 6 7 8 9 10

<label class = "select-label" >აირჩიეთ თქვენი დინოზავრი:</label> <აირჩიეთ class = "cs-select cs-skin-rotate" > <ვარიანტის მნიშვნელობა = "1" >სტეგოზავრი</ვარიანტი> <ვარიანტის მნიშვნელობა = "2" >ველოცირაპტორი</ვარიანტი> <ვარიანტის მნიშვნელობა = "3" >სპინოზავრი</ვარიანტი> <ვარიანტის მნიშვნელობა = "4" >არქეოპტერიქსი</ვარიანტი> <ვარიანტის მნიშვნელობა = "5" >აპატოზავრი</ვარიანტი> </არჩევა> </განყოფილება>

როგორც ჩანს: . ახლის შუაში არის ტეგები , სადაც სიის ელემენტები ცნობილია.

ზოგიერთ კონდახში შეგიძლიათ დაამატოთ უმნიშვნელო ატრიბუტები ტიპს მონაცემთა კლასიან კიდევ მონაცემთა ბმული. არაფრის შეშინება არ არის, აუცილებელია კონტაქტების სიის სწორად ფუნქციონირებისთვის, რათა შეინახოს დამატებითი ინფორმაცია.

მოდით გადავიდეთ ცოტა სტილში.

ძირითადი სტილები ფაილშია cs-select.css. აქ არის სტილები, რომლებიც სიას აძლევს უნიკალურ იერს, რომელსაც ჩვენ ბაჩიტს ვუწოდებთ.

და იმისათვის, რომ შეიქმნას სტილი, რომელიც უნიკალური და ორიგინალურია, აუცილებელია დამატებითი ძალის დაძლევა. მაგალითად, პირველი კონდახისთვის () გამოიყენება შემდეგი სტილები:

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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

@font-face ( font-family: "icomoon"; src: url ( "../fonts/icomoon/icomoon.eot?-rdnm34"); src:url( "../fonts/icomoon/icomoon.eot?#iefix-rdnm34") format("embedded-opentype" ) , url ( "../fonts/icomoon/icomoon.woff?-rdnm34") ფორმატი("woff") , url ( "../fonts/icomoon/icomoon.ttf?-rdnm34") ფორმატი("truetype") , url ( "../fonts/icomoon/icomoon.svg?-rdnm34#icomoon") ფორმატი ("svg"); შრიფტის წონა: ნორმალური; შრიფტის სტილი: ნორმალური; ) div.cs-skin-border (ფონი: გამჭვირვალე; შრიფტის ზომა: 2em; შრიფტის წონა: 700; მაქსიმალური სიგანე: 600 პიქსელი;) @media ეკრანი და (მაქს. სიგანე: 30em) (.cs-skin-border (შრიფტის ზომა: 1em; ) .cs-skin-border > span (საზღვარი: 5px მყარი #000; საზღვრის ფერი: მემკვიდრეობა; გარდამავალი: ფონი 0.2 წმ, საზღვრის ფერი 0.2 წმ;). cs-skin-border > span: :after , .cs-skin-border .cs-selected span: :after ( font-family : "icomoon" ; content : " \e000"; ) .cs-skin-border ul span: :after ( content : "" ; opacity : 0 ; ) .cs-skin-border .cs-selected span: :after ( content : " \e00e"; ფერი: #ddd9c9; შრიფტის ზომა: 1.5em; გამჭვირვალობა: 1; გადასვლა: გამჭვირვალობა 0,2წმ; ) .cs-skin-border .cs-active > span (ფონი: #fff; საზღვრის ფერი: #fff; ფერი: #2980b9;) .cs-skin-border .cs-options (ფერი: #2980b9; შრიფტი- ზომა: 0.75em; გამჭვირვალობა: 0; გარდამავალი: გამჭვირვალობა 0.2წმ, ხილვადობა 0s 0.2s; ) .cs-skin-border .cs-active. skin-border ul span ( padding : 1em 2em ; backface-visibility : დამალული ; ) .cs-skin-border .cs-options li span:hover , .cs-skin-border li.cs-focus span ;)

და ეს სტილები განლაგებულია ცალკე ფაილში (სიცხადისთვის) cs-skin-border.css.

ვისნოვოკი

რა შეგიძლიათ გააკეთოთ თქვენი ვებსაიტის უნიკალური დიზაინის შესაქმნელად? და უპირველეს ყოვლისა - არ შეგეშინდეთ დიზაინის ექსპერიმენტების გაკეთება, თანდათანობით გააფერადეთ იგი. შემდეგ თქვენ შექმნით (ექსპერიმენტების საშუალებით) ზუსტად იმას, რაც თქვენს კლიენტებს შეეფერება და ისინი არ იტყვიან "ვაიმე, მომწონს ეს დიზაინი, კიდევ რა არის ამ საიტზე!" 😉.

უმარტივესი სია, რომელიც გამოჩნდება HTML-ში, მარტივია შერჩეული ტეგის გამოყენებით. ეს არის კონტეინერის ტეგი, სადაც ჩასმულია ოფციონის ტეგები – თქვენ თავად შეგიძლიათ დააყენოთ ელემენტები სიაში.

არსებობს სიის რამდენიმე ვარიანტი, რომელიც შეიძლება შეიქმნას დამატებითი შერჩევის ტეგის გამოყენებით: სია, რომელიც იხსნება (ოფციები გამოჩნდება მთავარ ველზე დაწკაპუნების შემდეგ ან ახალ კურსორზე გადაადგილების შემდეგ) და მრავალ არჩევის სია - ახალ ველში შეგიძლიათ აირჩიეთ lka ქულები. პირველი არის ყველაზე ვრცელი და წარმოადგენს ნავიგაციის მნიშვნელოვან ელემენტს მიმდინარე საიტებზე. მრავალი არჩევანის სია, რომელიც გამოჩნდება, შეგიძლიათ იხილოთ, მაგალითად, კატალოგებში, სადაც თქვენ უნდა აირჩიოთ პროდუქტის რამდენიმე მახასიათებელი.

თქვენ შეგიძლიათ შეცვალოთ სიების მიმდინარე გარეგნობა და ძალა უნივერსალური და სპეციალური ატრიბუტების გამოყენებით.

აირჩიეთ ტეგის ატრიბუტები

1. მრავალჯერადი – ადგენს მრავალჯერადი არჩევანს.

2. ზომა – ადგენს სიაში ხილული რიგების რაოდენობას ან სიმაღლეს. და ყველაფერი ინახება აქ, რადგან არ არსებობს მრავალი ატრიბუტი. თუ ეს ასეა და არ მიუთითებთ ზომას, მაშინ თუ თქვენ გაქვთ მრავალი ვარიანტი, გექნებათ არჩევანის ყველა შესაძლო ვარიანტი, თუ ყოველდღიურად გაქვთ რამდენიმე, მაშინ წაკითხვის მხოლოდ ერთი რიგი იქნება და თქვენ შეგიძლიათ წაიკითხოთ პასუხი ლიფტის ხატულაზე დაწკაპუნებით მარჯვენა მხარეს. თუ სიმაღლის ზომა დაყენებულია და ის ნაკლებია ვარიანტების რაოდენობისთვის, მაშინ მარჯვნივ გამოჩნდება გადახვევის ველი.

3. სახელი – სახელი. სია, რომელიც გამოჩნდება, შეიძლება გაკეთდეს მის გარეშე, მაგრამ ეს შეიძლება იყოს საჭირო სერვერზე შეგროვების პროგრამასთან ურთიერთობისთვის. როგორც წესი, მაინც ვუკვეთავ.

არჩევის ტეგი არ შეიცავს რაიმე სავალდებულო ატრიბუტს, მაგრამ ექვემდებარება ოფციონის ტეგს.

ჩადგმული ოფციონის თეგის ატრიბუტები

არჩეული - ანიჭებს ხედს სიის ერთეულს. შესაძლებელია ერთზე მეტი ნივთის ნახვა, თუ მითითებულია მრავალჯერადი ატრიბუტი.
ღირებულება - მნიშვნელობა. ეს ატრიბუტი სავალდებულოა. ვებ სერვერი დამნაშავეა სიაში არსებული ელემენტების არასწორად გაგებაში მომხმარებლის შერჩევით.
ლეიბლი. ამ დამატებითი ატრიბუტისთვის, შეგიძლიათ სწრაფად იპოვოთ სიების სხვა ელემენტები. მაგალითად, ეკრანზე გამოსახულია „მილანი“ სათაურში მითითებული ოფციის ნაცვლად „მილანი ლომბარდიის ადმინისტრაციული ცენტრია“. პივნიჩნა იტალია“. ეს ატრიბუტი ასევე გამოიყენება სიაში ელემენტების დასაჯგუფებლად.

სანამ სია ფართოა, ის განთავსდება სიის ყველაზე ფართო ტექსტის მეორე ნახევრის უკან. ცხადია, სიგანე შეიძლება შეიცვალოს დამატებითი HTML სტილის გამოყენებით.

ჩამონათვალი იმისა, რაც სხვაგვარად ჩანს

ამისათვის შეგიძლიათ გამოიყენოთ დამატებითი CSS, მაგალითად, სია გამოჩნდება გვერდით ელემენტზე გადასვლისას. სიების შექმნის სხვადასხვა შესაძლებლობას იძლევა JavaScript, რასაც ხელს უწყობს Jquery ბიბლიოთეკა. დამატებითი ბიბლიოთეკის მიზნებისთვის კავშირების სია შეიძლება კიდევ უფრო რთული იყოს, მაგალითად, კასკადური. შემდეგ, როდესაც ირჩევთ ელემენტს ერთ სიაში, ჩნდება შემდეგი სია, მაგალითად, მენიუს მთავარი ელემენტი „ქალის ტანსაცმელი“ (როდესაც დაჭერით, ერთ-ერთი ტიპის არჩევისას, მაგალითად, „ზედა ტანსაცმელი“, სია ელემენტებით წვეთები: ქურთუკები, პარკები, ქურთუკები, ქურთუკი, ბეწვის ქურთუკი ან სხვა.

ჩვენ მთლიანად გადავამოწმეთ ძირითადი მეთოდები, ასე რომ თქვენ შეგიძლიათ გამოიყენოთ ისინი სიის შესაქმნელად, რაც აკლია. როგორც ჩანს, JavaScript-ში ბევრი ნიუანსია, რომელიც საშუალებას გაძლევთ შეცვალოთ სიების ფუნქციონირება და გარეგნობა.

გამარჯობა, ბლოგის საიტის თანამემამულე მკითხველებო. როგორც ეშმაკის სიბრძნის შესწავლის ნაწილი, შეგიძლიათ განაგრძოთ დამატებითი დახმარებისთვის საიტზე ფორმების შექმნის დეტალების დათვალიერება.

დღეს ჩვენ გავარკვევთ როგორ შევქმნათ ჩამოვარდნილი სიები (გახსენით), ამ რიცხვს აქვს მრავალჯერადი არჩევანი, რასაც მოჰყვება არჩევა და ოფცია, როგორ ავაშენოთ ტექსტის ველიტექსტური რედაქტორის დამატებითი დახმარებისთვის და ასევე მოდით ვისაუბროთ ფორმების ფუნქციონირების გაფართოების შესაძლებლობაზე ტეგების დაყენებით ველების ნაკრები, ლეიბლი და ლეგენდა.

ვვარაუდობ, რომ ნებისმიერი ფორმა, რომელიც გვერდზეა, იქმნება კულისებში და განკუთვნილია კლიენტიდან ნებისმიერი ინფორმაციის შეყვანისთვის და სერვერზე გაგზავნისთვის (მაგალითი -).

სამწუხაროდ, ჩვენი ჰიპერტექსტის განლაგების ტექნოლოგია არ იძლევა ამ ინფორმაციის დაუყონებლივ დამუშავების საშუალებას, ამიტომ HTML-ის გამოყენებით ჩვენ ვქმნით ფორმის ორიგინალურ იერსახეს და საჭირო მონაცემები იძაბება დასამუშავებლად. ამ მეთოდით, ვებ სერვერზე პირდაპირ იქმნება სპეციალური ფაილი, რომელიც დაწერილია ერთ-ერთი სერვერის ძრავის მიერ (ყველაზე ხშირად, PHP). მაგალითად, დაბრუნების ბმულისთვის შეგიძლიათ შექმნათ mail.php ფაილი, რომელიც კოლექციონერი იქნება.

როდესაც ეძებთ ინფორმაციას ამ პუბლიკაციაში, არ უნდა დაგვავიწყდეს, რომ გვერდის ყველა ხილული ელემენტის კოდები, ფორმების ჩათვლით, ყოველთვის მდებარეობს სხეულის ტეგში.

ეს ინფორმაცია უკიდურესად აუცილებელია, როგორც შეხსენება დისტრიბუტორებისგან ინსტრუმენტების ყველა ამჟამინდელი გამოყენების შესახებ (ვფიქრობ, ამ ფუნქციის განხორციელების პირველი ნაბიჯი არის ბანკში) და რაც მთავარია გამოავლინოს ძირითადი ტეგების შეცვლის მექანიზმი, შემდეგ HTML კოდის რედაქტირება, რომლის საჭიროებაც ჩნდება დროდადრო, გადაიქცევა დატვირთული მიღებაზე.

2. მრავალჯერადი- ეს ატრიბუტი, რომელსაც არ აქვს პარამეტრები, იძლევა მრავალჯერადი შერჩევის საშუალებას თითო ჩანაცვლებაზე არჩეული კონდახის ქვეშ, შეგიძლიათ აირჩიოთ მხოლოდ ერთი ელემენტი (რიგი). შეეცადეთ ნახოთ რამდენიმე სტრიქონი ამ სიაში დათვით (თითო-თითო ნებისმიერ ადგილას, დააჭირეთ Ctrl კლავიშს, ან შემდეგ Shift, სათითაოდ):

3. ზომა— ადგენს ჩამოვარდნილი სიის სიმაღლეს, რათა გამოჩნდეს რიგების რაოდენობა. თუ არსებობს მრავალი ატრიბუტი და ზომის მნიშვნელობა არ არის მითითებული (როგორც განაცხადში), მაშინ პროდუქციის უკან გამოსახულია რამდენიმე სტრიქონი, მაგრამ, მაგალითად, size="5"-ით უკვე ნახავთ ხუთს:

Option Textarea Label Fieldset Legend

4. საჭირო(პარამეტრები არ არის) - ეს ნიშნავს, რომ თქვენ უნდა გააკეთოთ არჩევანი მონაცემთა შემგროვებელთან გაგზავნამდე. თუ სიაში არ არის არჩეული ელემენტი, ეს ფორმები არ გაიგზავნება:

Option Textarea Label Fieldset Legend

5. ავტოფოკუსი(მნიშვნელობის გარეშე) — აყენებს ფოკუსს სიაზე გვერდის მონახულებისთანავე. გარდა ამისა, რადგან ხმა არის კლავიშებთან მუშაობის მთავარი ნაწილი, იგივე წინასწარ მორგებული ფოკუსი დაგეხმარებათ იმუშაოთ სიიდან კლავიატურაზე ისრიანი ღილაკების გამოყენებით, მაუსის შეცვლის გარეშე:

6. გამორთულია(პარამეტრები არ არის) - ბლოკავს სიაზე წვდომას (მოიცავს მას). პრაქტიკაში, დაურეკეთ ვიკორისტებს ერთდროულად სკრიპტებთან ერთად ამ შემთხვევებში, თუ თქვენ გჭირდებათ სიაში ჩასმა, რაც გამოვლინდა, მხოლოდ მაშინ, როდესაც მომღერალ გონებას გაიმარჯვებს:

7. ფორმაეს არის ბმული სიაზე ერთი ან მეტი ფორმის მქონე, რომლის წინ უნდა განთავსდეს ღვინოები, მაგრამ არის კონტეინერის პოზიცია

. ამ შემთხვევაში, პარამეტრი იწერება, როგორც ფორმის ატრიბუტის მნიშვნელობა გლობალური id ატრიბუტი, რომელიც ემატება ფორმის ტეგს:

აირჩიეთ სიიდან Option Textarea Label Fieldset Legend

არ აურიოთ select tag ატრიბუტი, როგორც ძირითადი ტეგი ფორმის შესაქმნელად. აპლიკაციას აქვს id="data" ატრიბუტი ფორმის ტეგის წინ და form="data" შერჩეული ტეგის წინ, რაც საშუალებას გაძლევთ დააკავშიროთ სია, რომელიც გამოჩნდება კონკრეტულ ფორმასთან.

ვარიანტის ტეგის ატრიბუტები

1. ღირებულება- მიუთითებს სიაში არსებულ მნიშვნელობებზე, რომლებიც გადაეგზავნება სერვერს (ფორმის პროცესორი). გთხოვთ გაითვალისწინოთ, რომ სახელი იგზავნება სემპლერზე, როგორც მითითებულია შერჩეული ტეგის სახელის ატრიბუტით და ღირებულება(ამ კონდახისთვის - 1, 2, 3, 4, 5), რომელიც მიუთითებს ჩამოსაშლელი სიის არჩეულ რიგს:

Option Textarea Label Fieldset Legend

2. გამორთულია- ბლოკები ელემენტის ასარჩევად სიაში, რომელიც გამოჩნდება.

Option Textarea Label Fieldset Legend

როგორც კონდახიდან ხედავთ, "ოფცია" მწკრივი არააქტიურია და მისი არჩევა შეუძლებელია.

3. ლეიბლი— აჩვენებს იმავე სიის ტექსტის პოზიციას (რას ნიშნავს). ლეიბლის არსებობის შემთხვევაში ნაჩვენებია ღირებული ატრიბუტის შესაბამისი მწკრივი და იგნორირებულია ოფციონის ტეგის შუაში მდებარე ტექსტური სივრცე. იგივეა, რაც ნაცვლად მხოლოდ ერთი დღე.

Tag Textarea Tag Label Tag Fieldset Tag Legend

მარველი. ზემოთ მოყვანილ მაგალითში, ოფციონის პირველ სტრიქონს აქვს ცარიელი კოდი (ცხრილის მარცხენა მხარეს), მაგრამ პარამეტრის ეტიკეტი = "Option tag" არის შეყვანილი, რის შედეგადაც თავად ტექსტი გამოჩნდება სიაში ( მარჯვენა მხარე). კოდის კიდევ ერთი სტრიქონი არის ტექსტის „Textarea Tag“ განთავსება ოფციონის ტეგის ნაცვლად და სიტყვა „Textarea“ ნაჩვენებია სიაში მარჯვნივ, რომელიც ემთხვევა label="Textarea"-ს მნიშვნელობებს.

4. შერჩეული— ხედავს სიაში მიმდინარე ნივთს:

Option Textarea Label Fieldset Legend

მრავალჯერადი ატრიბუტი ნიშნავს, რომ ერთზე მეტი ელემენტი ჩანს:

Option Textarea Label Fieldset Legend

optgroup tag ატრიბუტები

თუ სია, რომელიც გამოჩნდება, დახარისხებაა საჭირო, მაგალითად, ჯგუფებად დაყოფა, მაშინ თითოეული ამ ჯგუფისთვის თქვენ უნდა შექმნათ კონტეინერი, რომელიც ხსნის და ხურავს optgroup ტეგებს, რომლის შუაში არის ჩამოსაშლელი წერტილები. განლაგებულია ასეთი სია. ამ შემთხვევაში, არსებობს ორი ატრიბუტი მსგავსი სიის მორგებისთვის, რომელიც იხსნება.

1. ლეიბლი— პარამეტრად ჩასვამს კანის ჯგუფის სახელს:

Option Textarea Label Fieldset Legend

იგივე, ოღონდ შერჩეული ტეგის მრავალჯერადი და ზომით =====«7»:

Option Textarea Label Fieldset Legend

2. გამორთულია(მნიშვნელობის გარეშე) - ბლოკავს იმავე ჯგუფის ელემენტების არჩევანს, ყველა პარამეტრის ჩათვლით, და არააქტიური ელემენტები ნაჩვენებია ნაცრისფერი ფერით:

Option Textarea Label Fieldset Legend

პატარა ვიდეო კლიპი აქ კიდევ უფრო პრევერბალური იქნება:

ფორმის ტექსტის ველი დამატებითი ტექსტისთვის

საიტის ფორმის კიდევ ერთი ელემენტი, რომელსაც ჩვენ განვიხილავთ, არის ველი დიდი რაოდენობით ტექსტის შეყვანის შესაძლებლობით. ეს შეიძლება შეიქმნას დამატებითი textrea ტეგის გამოყენებით. ატრიბუტების გარეშე, ტეგი მისცემს შემდეგ შედეგს:

შეიყვანეთ ტექსტი:

ველში შეგიძლიათ შექმნათ მწკრივის გადარიცხვები, რომლებშიც ტექსტი გადადის სერვერზე არსებულ პროცესორზე გადარიცხვის დეტალებით. ველის დაჭიმვა შესაძლებელია სიგანეში და სიგრძეში ქვედა მარჯვენა კუთხის დათვით დამარხვით, რომელიც აღინიშნება ორი დიაგონალური ნაკეცით.

ახლა შევეცადოთ დავამატოთ რამდენიმე ატრიბუტი საწყის კოდს პარამეტრების გამოყენებით:

1. სახელი- განსაზღვრავს ტექსტის არეალის სახელს, როგორც მნიშვნელობას მისი იდენტიფიკაციისთვის ფორმის მონაცემების ატვირთვის შემდეგ სერვერზე დამუშავებამდე.

2. პოლკოვნიკები— ველის სიგანე, რომელიც მოქმედებს როგორც პარამეტრი, დაყენებულია ჰორიზონტალურად განთავსებული ახალი სიმბოლოების რაოდენობის მიხედვით. დასუფთავების ღირებულება – 20.

3. რიგები- ტექსტის ველის სიმაღლე, რომელიც იზომება რიგების რაოდენობით. თუ მომხმარებლის მიერ შეყვანილი ტექსტის სტრიქონების რაოდენობა ამ ატრიბუტით მითითებულ მნიშვნელობაზე მეტი გამოჩნდება, მაშინ მარჯვენა მხარეს გამოჩნდება ვერტიკალურად გადახვევა.

4. Მაქსიმალური სიგრძე— განსაზღვრავს სიმბოლოების მაქსიმალურ რაოდენობას, რომელიც შეიძლება განთავსდეს ტექსტის ველში. თუ ლიმიტი უფრო შორს არის გადატანილი, დანერგვა შეუძლებელი იქნება.

ქვემოთ მოცემულია მაგალითი ყველა ყველაზე მნიშვნელოვანი ატრიბუტით, რომელიც შეგიძლიათ გადაამოწმოთ განსაკუთრებით ასოების და სტრიქონების საჭირო რაოდენობის უბრალოდ ტექსტის არეში განთავსებით (შეგიძლიათ უბრალოდ შეიყვანოთ ერთი და იგივე სიმბოლო რამდენჯერმე):

შეიყვანეთ ტექსტი:

5. Minlength— მიუთითებს სიმბოლოების მინიმალურ რაოდენობაზე, რომლებიც უნდა შეიყვანოთ ტექსტის ზონაში. თუ მომხმარებელი ცდილობს გაგზავნოს ტექსტი ნაკლები სიმბოლოებით, ბრაუზერი აჩვენებს მოკლე შეტყობინებას ინფორმაციის შესახებ, რომელიც შეიცავს მინიშნებას ჩანაცვლების ფორმის დამატების აუცილებლობის შესახებ და ზოგიერთი სიმბოლო უკვე შეყვანილი.

7. Წაიკითხეთ მხოლოდ(პარამეტრების გარეშე) - თუ ამ ატრიბუტს მიამაგრებთ textarea-ს, მაშინ ტექსტის ველი მომხმარებლებისთვის უცვლელად გამოჩნდება და ჩაითვლება წაუკითხავად. თქვენ ასევე შეგიძლიათ მასზე ფოკუსირება (გადაიტანეთ კურსორი ველზე და დააწკაპუნეთ მაუსის მარცხენა ღილაკზე), ასევე შეგიძლიათ ნახოთ და დააკოპიროთ (ხშირად ან მთლიანად) ტექსტი:

არსებობს მთელი რიგი სხვა ატრიბუტები, რომლებიც ახორციელებენ დამატებით ფუნქციებს ველების შევსებისას:

8. ავტომატური დასრულება- მიუთითებს, რომ ბრაუზერი პასუხისმგებელია მოთხოვნის ჩვენებაზე, ფორმის შევსებისას ადრე შეყვანილი მონაცემების სახით და საშუალებას იძლევა ავტომატურად ჩასვა დამხმარე ტექსტი.

Სულ ეს არის ორი პარამეტრი: on(შედის) რომ გამორთულია(ვიმქნენო). ღერძის კონდახის კოდი:

ეს ატრიბუტი "on" მნიშვნელობით მუშაობს მხოლოდ იმ შემთხვევაში, თუ კონკრეტული მომხმარებლის ვებ ბრაუზერს აქვს გამორთული ფორმის ველების ავტომატური შევსება.

9. შეფუთვა- ადგენს ბრაუზერის ტექსტის არეში მწკრივების გადაადგილების წესებს სამი დამატებითი მნიშვნელობის გამოყენებით:

რბილი— სიმბოლოების ნაკრები, რომელიც არ ჯდება ველში, რომელიც სცილდება სიგანეს, ავტომატურად გადადის ახალ რიგში. ვისთანაც კოლექციონერი ტექსტი გადაიცემა ერთი რიგის ხედიდან. ამ შემთხვევაში, თუ გსურთ ტექსტის გადატანა ნებისმიერ აუცილებელ ადგილას დამატებითი „Enter“ ღილაკის გამოყენებით, მაშინ გადატანა ინახება ვებფორმის გაძლიერებისას.

შეიყვანეთ ტექსტი:

მძიმე— გადატანა მოხდება ავტომატურად, თუ ტექსტი არ ჯდება ველის სიგანეში და შემდგენელის დახმარებით შეინახება ასეთი გადატანის ადგილი. ეს პარამეტრი გამოიყენება მხოლოდ ასოცირდება cols ატრიბუტთან:

შეიყვანეთ ტექსტი:

გამორთულია- მწკრივის გადაცემის ჩართვა. თუ ტექსტის ფრაგმენტს ახვევთ დამატებითი „Enter“ ღილაკის უკან მექანიკური გადაადგილების გარეშე, მთელი ტექსტი განთავსდება ერთ რიგში და გამოჩნდება ჰორიზონტალური გადახვევის ნიმუში:

შეიყვანეთ ტექსტი:

10. ავტოფოკუსი(არ აქვს რაიმე პარამეტრი) - იწყებს ფოკუსირებას ტექსტის ველზე, როდესაც დააწკაპუნებთ ფორმის მხარეს.

11. გამორთულია— მხოლოდ წაკითხვის ატრიბუტის შეცვლით (რომელიც ასევე აფერხებს ველის ადგილზე რედაქტირებას, მაგრამ ასევე საშუალებას აძლევს მის ფოკუსირებას), მთლიანად ბლოკავს წვდომას ტექსტის ზონაში, რაც საჭიროა ფერის დიაპაზონის მიხედვით:

კატეგორიები

პოპულარული