2018-06-28

HTML Formları Oluşturma

Merhaba sevgili ziyaretçi!

Önceki bölümlerde sitenin ana unsurlarını oluşturduk ve ayrıca içeriğin doldurulması ile ilgili konuları da ele aldık. Şimdi bir sonraki oldukça önemli ve kapsamlı konuya geçebiliriz: HTML formlarıyla çalışma.

HTML formları bir web sayfasının etkileşimli kısmını tanımlayan en önemli etkileşim öğeleridir. Bu olmadan hiçbir tam teşekküllü web sitesi yapamaz. Sonuçta, kullanıcı ile sunucu tarafı arasında ana alışverişin gerçekleştirilmesi onların yardımıyla gerçekleşir.

Ancak aynı zamanda formlar, çok çeşitli işlevsel bileşenlere ve metin alanlarına sahip, oldukça karmaşık arayüz öğeleridir. Bu nedenle, bu bölümde, oluşturulan web sitesindeki pratik uygulamalarına özellikle dikkat ederek ana unsurlarını daha ayrıntılı olarak ele almaya çalışacağız.

Ayrıca MySQL veritabanı ile çalışma konularına da burada değinilecektir. Örneklerimizdeki formların kullanımı, veritabanı tablolarıyla etkileşimleriyle ayrılmaz bir şekilde bağlantılı olacaktır. Kullanıcılar tarafından girilen verilerin saklanacağı ve daha sonra sunucu tarafından istekleri işlerken kullanılacaktır.

• Genel olarak HTML formları hakkında
• çevrimiçi sipariş formu
• İzin formu
• geri bildirim formu

Genel olarak HTML formları hakkında

Bir web sayfasındaki form, bir blok öğesi tarafından ayarlanır gibi veri girişinin işlenmesinden sorumlu tüm unsurları içeren bir kaptır. , , veya .</p> <p>Aynı zamanda etiket <form>Birkaç özellik var ama bunlardan ikisi gerekli. Bu, formun nereye gönderileceğini belirten bir adres ve gönderileceği yöntemi (POST veya GET) belirten bir "yöntem" içeren bir "eylem"dir.</p> <p>Öğelerine gelince, en çok yönlü olanı etikettir <input>bilginin çoğunun iletildiği ve çeşitli arayüz elemanlarının oluşturulduğu yardımıyla. Ayrıca, giriş alanlarının türü, değeri işlevsel amaçlarını belirleyen ana özelliği olan “tip” ile belirlenir.</p> <p>Yani, değer "metin" - bir metin alanı, "şifre" - şifreli bir alan, "e-posta" - bir e-posta adresi girmek için bir alan, "radyo" - bir anahtar, "onay kutusu" - bir onay kutusu olduğunda, "gönder" - formları göndermek için bir düğme.</p> <p>Aşağıda öğenin kullanımına ilişkin bir örnek verilmiştir <input>farklı alan türleri için.</p> <ol><p><form name =<b>"örnek"</b> eylem = <b>"#" </b> yöntem = <b>"postalamak"</b> ></p> <p><input type =<b>"metin"</b> isim = <b>"giriş yapmak"</b> ></p> <p><input type =<b>"e-posta"</b> isim = <b>"e-posta"</b> ></p> <p><input type =<b>"şifre"</b> isim = <b>"şifre"</b> ></p> <p><input type =<b>"göndermek"</b> isim = <b>"düğme"</b> değer = <b>"Göndermek"</b> ></p> <li> </ol><p>Şekil 1 Örnek HTML formu</p> <p>Bu örnekte bunu öğe için görebilirsiniz. <input>"Type" özelliğinin değerine bağlı olarak alan farklı biçimler alabilir. Örneğin, ilk öğede (konum 2), alan, metin bilgilerinin girilmesi için tasarlanmıştır (bu durumda oturum açma için). Bir sonraki (konum 3) e-postanızı girmek içindir, ardından (konum 4) şifre içindir ve sonuncusu (konum 5) formu göndermek için bir düğmedir.</p> <p>Elbette bu çoğunlukla gerekli niteliklerin kullanıldığı basitleştirilmiş bir örnektir. Gerçekte genellikle alanların özelliklerini belirleyen diğerleri kullanılır.</p> <p>Ayrıca her öğenin kendine ait bir özellik listesi vardır. Bunların hepsini burada listelemeye değmez, çünkü oldukça fazla sayıda var ve bu bilginin bu amaç için özel olarak tasarlanmış HTML referans literatüründen alınması en iyisidir.</p> <p>İnternette HTML'ye ilişkin çok sayıda güvenilir referans vardır. Örneğin, daha önce de belirttiğim gibi, bu amaçlar için, bir kısmı HTML5'te bulunan tüm öğelerin ayrıntılı bir açıklamasına ayrılmış olan web teknolojileri hakkındaki WebReference.ru referans kitabını kullanabilirsiniz.</p> <p>ekran görüntüsü 33</p> <p>Burada sitemizin işlevsel düğümlerini oluşturmak için pratik olarak formlar oluşturacağız. Ve mümkün olduğunca farklı niteliklere sahip farklı unsurları kullanmaya çalışacağız.</p> <h2><i>çevrimiçi sipariş formu</i></h2> <p>Oluşturulan web sitesi, araba camlarına hırsızlık önleme işaretlerinin takılması için sipariş verilmesini sağlar. Bunu yapmak için araç verilerini girmeniz ve bir işaretleme yöntemi seçmeniz gerekir. Bundan sonra girilen verilere dayanarak kullanıcıya işin maliyeti hakkında bilgi verilmelidir. Üstelik hem tam fiyat hem de indirimler dikkate alınarak hesaplanıyor.</p> <p>Oluşturacağımız online sipariş formunun ilgili versiyonu aşağıdaki ekran görüntüsünde gösterilmektedir.</p> <br><img src='https://i0.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-onlajn-zakaza.jpg' width="100%" loading=lazy loading=lazy><p>Şekil 2 Çevrimiçi sipariş formu</p> <p>Burada aşağıdaki unsurlar kullanılacaktır:</p> <ul><li><input>metin giriş alanıyla;</li> <li><select>;</li> <li><option>.</li> </ul><p>Oluşturulan web sitesinde kullanılan kayıt formu, online sipariş ile birleştirilir. Bunun nedeni, bu durumda kullanıcının kişisel hesabının, verilen siparişlerin durumunu görüntüleme ve yeni sipariş verme amacı taşımasıdır. Bu nedenle bu seçenekte ilk emrin yerine getirilmesiyle aynı anda kaydolmak oldukça mantıklıdır.</p> <p>Aşağıda bu işlevsel parçanın nasıl oluşturulması gerektiği anlatılmaktadır.</p> <p>Resim boyutunu artırmak/azaltmak için resmin üzerine tıklayın</p> <br><img src='https://i1.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-registracii.jpg' width="100%" loading=lazy loading=lazy><p>Şekil 3 kayıt formu</p> <p>Bu seçenekte sağlanması gereken unsurlar:</p> <ul><li><label>;</li> <li><input>metin giriş alanıyla;</li> <li><input>bir e-posta giriş alanıyla;</li> <li><input>şifre giriş alanı ile;</li> <li><input>Formu göndermek için bir düğme ile (çevrimiçi sipariş formuyla birlikte).</li> </ul><h2><i>İzin formu</i></h2> <p>Kişisel hesabınıza girmek için yetkilendirme gereklidir. Genellikle böyle bir form, oturum açma adı, parola ve bunu göndermek için kullanılan bir düğme için giriş alanlarından oluşur. Ayrıca kimlik bilgilerini geri yüklemek için "Giriş bilgilerinizi mi unuttunuz?", "Şifrenizi mi unuttunuz?" gibi ek bağlantılar sıklıkla kullanılır.</p> <p>Bu tür ek bağlantıların genellikle kayıt formunun öğeleriyle birlikte bulunmasına rağmen aslında bunların öğeleriyle hiçbir ilgisi yoktur.</p> <p>Aşağıda yetkilendirme elemanlarının yer aldığı kullanıcı panelinin genel görünümü verilmiştir.</p> <p>Resim boyutunu artırmak/azaltmak için resmin üzerine tıklayın</p> <br><img src='https://i0.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-avtorizacii.jpg' width="100%" loading=lazy loading=lazy> <p>Bu durumda aşağıdaki unsurlar kullanılacaktır:</p> <ul><li><label>;</li> <li><input>metin giriş alanıyla;</li> <li><input>şifre giriş alanı ile;</li> <li><input> </li> </ul><h2><i>geri bildirim formu</i></h2> <p>Bu formun adı amacından bahsediyor. Bu nedenle mesaj göndermek için gerekli tüm alanların bulunması gerekir. Bu durumda dört alandan oluşacaktır: ikisi gönderenin adını ve posta adresini girmek için, ikisi de mesajın kendisini göndermek için.</p> <p>Böyle bir formun görünümü aşağıdaki ekran görüntüsünde gösterilmektedir.</p> <p>Resim boyutunu artırmak/azaltmak için resmin üzerine tıklayın</p> <br><img src='https://i1.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-obratnoj-svyazi.jpg' width="100%" loading=lazy loading=lazy><p>Şekil 5 Geri bildirim formu</p> <p>Burada halihazırda kullanılan unsurlara ek olarak bir tane daha eklenmelidir ( <textarea>), alana birden fazla satırlık metin girebilirsiniz. Ve bu seçeneğe ilişkin listenin tamamı aşağıdaki formu alacaktır:</p> <ul><li><label>;</li> <li><input>metin giriş alanıyla;</li> <li><input>bir e-posta giriş alanıyla;</li> <li><textarea>birden fazla satırlık metin girebileceğiniz bir alanla.</li> <li><input>formu göndermek için bir düğme ile.</li> </ul><p>Dolayısıyla bu giriş niteliğindeki makalede, HTML formlarıyla ilgili bazı genel konuları ele aldık. Gelecekte hangi spesifik örneklerle çalışacağımıza karar verdik.</p> <p>Bundan sonra, formların pratik oluşturulmasına, her durum için gerekli kodun derlenmesine ve bunların ilgili MySQL tablolarıyla etkileşimlerinin açıklanmasına geçebiliriz. Ancak bu gelecek makalelerde olacak.</p> <p>Saygılarımla, Nikolai Grishin</p> <ul><li>Sonraki satya:</li></ul> <p>Kullanıcı web sitelerinde gezinirken çoğunlukla yalnızca <b>bağlantılar</b> Web sayfalarında gezinmek için.</p><p>Ancak kullanıcının bazen kendi bilgilerini sağlaması gerektiği açıktır. <b>giriş alanları</b>. Bu tür etkileşimler şunları içerir:</p><ul><li>web sitelerine kaydolma ve oturum açma;</li><li>kişisel bilgilerin girilmesi (isim, adres, kredi kartı bilgileri vb.);</li><li>içerik filtreleme (açılır listeler, onay kutuları vb. kullanılarak);</li><li>bir arama yapmak;</li><li>dosyaları indiriyorum.</li> </ul><p>Bu ihtiyaçları karşılamak için HTML etkileşimli olanaklar sunar <b>kontroller</b> formlar:</p><ul><li>metin alanları (bir veya daha fazla satır için);</li><li>anahtarlar;</li><li>onay kutuları;</li><li>açılır listeler;</li><li>indirmek için widget'lar;</li><li>düğmeleri gönderin.</li> </ul><p>Bu kontroller farklı <b>Etiketler</b> HTML, ancak çoğu etiketi kullanıyor <input>. Kendi kendine kapanan bir öğe olduğundan alanın türü, type niteliğine göre belirlenir:</p><p> <!-- Текстовое поле --> <input type="text"> <!-- Флажок --> <input type="checkbox"> <!-- Переключатель --> <input type="radio"> </p><h2>Öğe <form></h2><p><form>tanımlayan bir blok elemanıdır <b>etkileşimli</b> bir web sayfasının parçası. Sonuç olarak, tüm kontroller (örneğin <input> , <textarea>veya <button>) olmalıdır <i>içeri</i> eleman <form> .</p><p>İki HTML özelliği <b>gerekli</b>:</p><ul><li>eylem belirleyen bir adres içerir <i>Nerede</i> form bilgileri gönderilecek;</li><li>yöntem GET veya POST olabilir ve <i>Nasıl</i> Form bilgileri gönderilecektir.</li> </ul><p>Genellikle form bilgileri şu adrese gönderilir: <b>sunucu</b>. <i>Nasıl</i> bu veriler daha sonra bu kılavuzun kapsamı dışında işlenecektir.</p><p>Formu, aşağıdaki amaçlara ulaşmak için birlikte çalışan kontrollerin bir koleksiyonu olarak düşünün: <b>bir</b> operasyon. Bir site giriş formu yazdıysanız, <b>üç</b> alanlar:</p><ul><li>e-posta alanı <input type="email"> </li><li>şifre alanı <input type="password"> </li><li>gönder düğmesi <input type="submit"> </li> </ul><p>Bu üç HTML öğesi tek bir formda yer alacaktır <span><form action="/login" method="POST"> </span>.</p><p>Benzer şekilde, aynı HTML sayfasına, ayrı bir öğeye bir kayıt formu ekleyebilirsiniz. <form> .</p><h2>Metin alanları</h2><p>Hemen hemen tüm formlar gerektirir <b>metin</b> Kullanıcılardan adlarını, e-posta adreslerini, şifrelerini, adreslerini vb. girmeleri istenir. Form metin alanları farklı çeşitlerde gelir.</p><p>Bu alanlar çok benzer olmasına ve kullanıcıların her türlü metni (yanlış olanları bile) girmesine izin vermesine rağmen, türleri belirli bir metin sağlar. <b>anlambilim</b> giriş için, alanın hangi bilgiyi belirlediğini belirleme <b>mutlak</b> içermek.</p><p>Tarayıcılar daha sonra kontrolün arayüzünü iyileştirmek için biraz değiştirebilir. <i>etkileşim</i> veya hangi içeriğin beklendiğine dair ipucu verin.</p><p>Örneğin, şifre alanında semboller yerine noktalar gösteriliyor. Sayı alanı ise yukarı ve aşağı tuşlarını kullanarak değeri artırmanızı/azaltmanızı sağlar.</p><h2>Yer tutucu</h2><p>Metin alanları görüntülenebilir <b>müstehcen</b> bir metin girildiği anda kaybolacak olan metin.</p><p> <input type="text" placeholder="Adınızı giriniz"> </p><p>Bir şey yazmaya başladığınızda “Adınızı girin” yazısının kaybolduğunu göreceksiniz.</p><h2><label></h2><p>Form öğelerinin kendileri çok açıklayıcı olmadığından, genellikle bunların önünde metin bulunur. <b>etiket</b>.</p><p> <label>E-posta</label> <input type="email"> </p><p>Yer tutucu, hangi içeriğin beklendiği konusunda zaten bazı ipuçları sağlasa da, etiketler her zaman görünür kalma avantajına sahiptir ve onay kutuları veya radyo düğmeleri gibi diğer form öğesi türleriyle birlikte kullanılabilir.</p><p>Form öğelerini tanımlamak için kısa paragraflar kullanabilseniz de, <label>anlamsal olarak daha doğrudur çünkü bunlar yalnızca formlarda mevcuttur. <label>alanın kimlik değerine karşılık gelen for niteliği kullanılarak belirli bir form öğesiyle de ilişkilendirilebilir.</p><p> <label for="first_name">İsim</label> <input id="first_name" type="text"> </p><p>Etiketi tıklattığınızda odak metin alanına gider ve imleci metin alanına yerleştirir. Şu ana kadar bu paket işe yaramaz gibi görünüyor, ancak onay kutuları ve anahtarlarla kullanışlı olacaktır.</p><h2>Onay kutuları</h2><p><b>Onay kutuları</b> yalnızca iki durumu olan form öğeleridir: açık veya kapalı. Temel olarak kullanıcının bir şeye "Evet" veya "Hayır" demesine izin verirler.</p><p> <input type="checkbox">Beni Hatırla</p><p>Küçük bir onay kutusuna tıklamak zor olabileceğinden, onay kutusunu ve açıklamasını içine koymanız önerilir. <label> .</p><p> <label> <input type="checkbox">Koşullara katılıyorum</label> </p><p>Onay kutusunu değiştirmek için "Şartları kabul ediyorum" metnine tıklayabilirsiniz.</p><p>Varsayılan olarak onay kutusu devre dışıdır. Checked özelliğini kullanarak bunu etkin olarak işaretleyebilirsiniz.</p><p> <label> <input type="checkbox" checked>Fatura adresimi kullan</label> </p><h2>Anahtarlar</h2><p>Kullanıcıya sağlayabilirsiniz <b>seçenekler listesi</b> anahtarlar kullanılarak seçilebilir.</p><p>Bu form öğesinin çalışması için HTML kodunuzun <b>grup</b> radyo düğmelerinin listesi birlikte. Bu, name özelliği için aynı değer kullanılarak elde edilir:</p><p> <label>Aile durumu</label> <label> <input type="radio" name="status">Bekar</label> <label> <input type="radio" name="status">Evli</label> <label> <input type="radio" name="status">Boşanmış</label> <label> <input type="radio" name="status">Dul</label> </p><p>Tüm radyo düğmeleri name niteliği için aynı değeri kullandığından (bu durumda, status değeri), bir seçeneğin seçilmesi diğerlerinin hepsini geçersiz kılacaktır. Anahtarlar <b>birbirini dışlayan</b>.</p><h3>Radyo düğmeleri ve onay kutuları arasındaki fark</h3><p>Onay kutusu mevcut olmasına rağmen <b>Kendi başıma</b>, anahtarlar yalnızca formda görünebilir <b>liste</b>(bu en az iki seçenek anlamına gelir).</p><p>Ayrıca, onay kutusunun tıklatılması <b>keyfi</b> radyo düğmelerinden birini seçerken <b>zorunlu</b>. Bu nedenle en yakın seçeneği seçtiğinizde anahtarı kapatmanız mümkün değildir. Sonunda her zaman anahtarlardan biri seçilir.</p><h2>Açılır menüler</h2><p>Aralarından seçim yapabileceğiniz seçeneklerin sayısı çok fazla yer kaplıyorsa açılır menüleri kullanabilirsiniz. <select> .</p><p>Anahtarlara benzer şekilde çalışırlar, yalnızca düzen farklıdır.</p><p> <select> <option>Ocak</option> <option>Şubat</option> <option>Mart</option> <option>Nisan</option> <option>Mayıs</option> <option>Haziran</option> <option>Temmuz</option> <option>Ağustos</option> <option>Eylül</option> <option>Ekim</option> <option>Kasım</option> <option>Aralık</option> </select> </p><h3>Açılır menüden çoklu seçim</h3><p>Multiple özelliğini eklerseniz birden fazla seçenek seçme olanağı sağlayabilirsiniz.</p><p> <label>Hangi tarayıcıları kullanıyorsunuz?</label> <select multiple> <option>Google Chrome</option> <option>İnternet Explorer</option> <option>Mozilla Firefox</option> <option>Opera</option> <option>Safari</option> </select> </p><p>Ctrl (veya ⌘) tuşunu basılı tutup tıklayarak birden fazla seçeneği seçin. Bu, satır başına birden fazla onay kutusu kullanmaya iyi bir alternatif olabilir.</p><h2>Örnek: tam kayıt formu</h2> <form action="/signup" method="POST"> <p> <label>Çekici</label> <label> <input type="radio" name="title" value="Bay">Bay.</label> <label> <input type="radio" name="title" value="bayan">Hanım.</label> </p> <p> <label>İsim</label> <input type="text" name="first_name"> </p> <p> <label>Soyadı</label> <input type="text" name="last_name"> </p> <p> <label>E-posta</label> <input type="email" name="email"> </p> <p> <label>Telefon</label> <input type="tel" name="phone"> </p> <p> <label>Şifre</label> <input type="password" name="password"> </p> <p> <label>Şifreyi onaylayın</label> <input type="password" name="password_confirm"> </p> <p> <label>Bir ülke</label> <select name="country"> <option>Kanada</option> <option>Fransa</option> <option>Almanya</option> <option>İtalya</option> <option>Japonya</option> <option>Rusya</option> <option>Büyük Britanya</option> <option>Amerika Birleşik Devletleri</option> </select> </p> <p> <label> <input type="checkbox" name="terms">Kullanım şartlarını kabul ediyorum</label> </p> <p> <button>Kayıt olmak</button> </p> </form> <p>Başka form elemanları da mevcuttur ancak en çok kullanılanlara baktık.</p> <p><form action="file.php" method="post" id="form">...form içeriği...</form></p> <li>Form öğesinin hemen içinde, istenildiği kadar olabilen kontroller bulunmalıdır.</li> <p><b>Form özellikleri:</b></p> <ul><li>Action niteliği, formdan gönderilen verilerin ana işlenmesinden sorumlu bir komut dosyasına sahip bir sunucu dosyasını belirtir. Genellikle bu dosyanın kodu sunucu tarafı programlama dilinde yazılır; örneğin <i>php</i> veya <i>perl</i>.</li> <li>enctype özelliği sunucuya aktarılan bilginin türünü belirtir, eğer sadece metin verisi ise - text/plain, dosyalar formla birlikte gönderiliyorsa multipart/form-data belirtilmelidir.</li> <li>Yöntem niteliği, veri aktarım biçimini belirtir ve tanımlar. Bu konu üzerinde detaylı durmayacağız ancak daha güvenilir iletim için post yönteminin belirtilmesi gerektiğini söylemek gerekir.</li> </ul><h2><span>HTML form öğeleri</span></h2> <ul><table><tr><td class="code"> <<span>giriş türü = "metin" ad = "giriş" boyut = "20" değer = "Giriş" maxlength = "25" > !}</span> </td> </tr></table><p><input type="text" name="login" size="20" value="Giriş yapmak" maxlength="25"></p> <p>Sonuç:</p> <p><input style="all: inherit; border:1px #aaa solid" type="text" size="20" value="Giriş yapmak" maxlength="25"></p> <ul><li>Type özelliğinin değeri - text - bunun bir metin alanı olduğunu gösterir</li> <li>boyut — metin alanının karakter cinsinden boyutu</li> <li>maxlength — alana sığabilecek maksimum karakter sayısı</li> <li>değer - metin alanındaki ilk metin</li> <li>name — işleyici dosyasındaki verileri işlemek için gerekli olan öğe adı</li> </ul><p><input type="password" name="pass" size="20" value="Şifre" maxlength="25"></p> <p>Sonuç:</p> <p><input style="all: inherit; border:1px #aaa solid" type="password" size="20" value="Şifre" maxlength="25"><br>Alanda metin yerine bir maske görüntülenir - yıldızlar veya daireler</p> <table><tr><td class="code"> <<span>giriş türü = "gönder" değeri = <span>"Veri gönder"</span>> </span> </td> </tr></table><p><input type="submit" value="Veri gönder"></p> <p>Sonuç:</p> <p><input type="submit" value="Veri gönder" style="all: unset; border:1px #aaa solid"></p> <p>Gönder butonu kullanıcı tarafından girilen tüm form verilerini toplar ve formun action özelliğinde belirtilen adrese gönderir.</p> <table><tr><td class="code"> <<span>giriş türü = "sıfırla" değeri = "Formu temizle" > !}</span> </td> </tr></table><p><input type="reset" value="Formu temizle"></p> <p>Sonuç: <br><img src='https://i0.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-65.png' height="54" width="224" loading=lazy loading=lazy><br>Düğme, tüm kontrollerin durumunu orijinal durumuna döndürür (formu temizler)</p> <table><tr><td class="code"> <<span>giriş türü = "onay kutusu" adı = "asp" değeri = "evet" > !}</span> A.S.P.<<span>br></span> <<span>giriş türü = "onay kutusu" adı = "js" değeri = "evet" checked = "checked" > !}</span> javascript<<span>br></span> <<span>giriş türü = "onay kutusu" adı = "php" değeri = "evet" > !}</span> PHP<<span>br></span> <<span>giriş türü = "onay kutusu" adı = "html" değer = "evet" checked = "checked" > !}</span> HTML<<span>br></span> </td> </tr></table><p><input type="checkbox" name="asp" value="Evet">A.S.P. <br> <input type="checkbox" name="js" value="Evet" checked="checked">javascript <br> <input type="checkbox" name="php" value="Evet">PHP <br> <input type="checkbox" name="html" value="Evet" checked="checked">HTML <br></p> <p><img src='https://i0.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-95.png' align="center" width="100%" loading=lazy loading=lazy><br>Sonuç:</p> <p><input type="checkbox">A.S.P. <br><input type="checkbox" checked>javascript <br><input type="checkbox">PHP <br><input type="checkbox" checked>HTML</p> <p>Html'de çoklu seçimi düzenlemek için bir onay kutusu kullanılır; birden fazla cevap seçeneğinin seçilmesi gerekli ve mümkün olduğunda</p> <table><tr><td class="code"> <<span>giriş türü = "radyo" adı = "kitap" değeri = "asp" > !}</span> A.S.P.<<span>br></span> <<span>giriş türü = "radyo" adı = "kitap" değeri = "js" > !}</span> Javascript<<span>br></span> <<span>giriş türü = "radyo" adı = "kitap" değeri = "php" > !}</span> PHP<<span>br></span> <<span>giriş türü = "radyo" adı = "kitap" değeri = "html" checked = "checked" > !}</span> HTML<<span>br></span> </td> </tr></table><p><input type="radio" name="book" value="asp">A.S.P. <br> <input type="radio" name="book" value="js">Javascript <br> <input type="radio" name="book" value="php">PHP <br> <input type="radio" name="book" value="HTML" checked="checked">HTML <br></p> <p><img src='https://i0.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-89.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>Sonuç:</p> <p><input type="radio">A.S.P. <br><input type="radio">Javascript <br><input type="radio">PHP <br><input type="radio" checked>HTML</p> <p>radyo düğmesi html, çeşitli seçenekler arasından tek bir seçime hizmet eder</p> <p>Checked özelliği, öğeyi hemen kontrol edildi olarak ayarlar</p> </ul><p><b>Önemli:</b> Elemanlar için <b>radyo</b> nitelik değerinin olması gerekir <b>isim</b> gruptaki tüm öğeler aynıydı: bu durumda öğeler birbirine bağlı olarak çalışacak, bir öğe açıldığında diğerleri kapatılacak</p> <h2><span>HTML Açılır Listesi</span></h2> <p>Açılır liste ekleme örneğine bakalım:</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 </td><td class="code"> <<span>adı seçin = "kitap" boyutu = "1" ></span> <<span>seçenek değeri = "asp" > !}</span> A.S.P.<<span>/seçenek></span> <<span>seçenek değeri = "js" > !}</span> JavaScript<<span>/seçenek></span> <<span>seçenek değeri = "php" > !}</span> PHP<<span>/seçenek></span> <<span>seçenek değeri = "html" selected = "selected" > !}</span> HTML<<span>/seçenek></span> <<span>/seç></span> </td> </tr></table><p><select name="book" size="1"> <option value="asp">A.S.P.</option> <option value="js">JavaScript</option> <option value="php">PHP</option> <option value="HTML" selected="selected">HTML</option> </select></p> <p>Sonuç:</p> <p><img src='https://i2.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-68.png' height="122" width="117" loading=lazy loading=lazy></p> <ul><li>Açılır liste, bir kapanış çiftine sahip olan ana etiketten (select) oluşur ve her liste öğesi, içinde öğenin metninin görüntülendiği bir seçenek etiketidir.</li> <li>değer içeren boyut özelliği <i>"1"</i> daraltılmış formdaki listede bir öğenin görüntülendiğini, geri kalanın menü okuna tıkladığınızda açıldığını belirtir</li> <li>Öğenin seçilen özelliği (seçenek), bu belirli öğenin başlangıçta görünür olacağını ve geri kalan öğelerin "daraltılmış" olacağını belirtir.</li> </ul><p><img src='https://i0.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-90.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>Büyük ve karmaşık listeler için bir seçenek var <b>alt başlık ekle</b>— label özelliğine sahip optgroup etiketi:</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 7 8 9 10 11 12 </td><td class="code"> <<span>adı seçin = "kitap" boyutu = "1" ></span> <<span>optgroup etiketi = "İngilizce" ></span> <<span>seçenek değeri = "asp" > !}</span> A.S.P.<<span>/seçenek></span> <<span>seçenek değeri = "js" > !}</span> JavaScript<<span>/seçenek></span> <<span>seçenek değeri = "php" > !}</span> PHP<<span>/seçenek></span> <<span>seçenek değeri = "html" selected = "selected" > !}</span> HTML<<span>/seçenek></span> <<span>/optgroup></span> <<span>optgroup etiketi = "Ruslar" ></span> <<span>seçenek değeri = "asp_rus" > !}</span> ASP Rusça<<span>/seçenek></span> <<span>seçenek değeri = "js_rus" > !}</span> Rusça JavaScript<<span>/seçenek></span> <<span>/optgroup></span> <<span>/seç></span> </td> </tr></table><p><select name="book" size="1"> <optgroup label="Английские"> <option value="asp">A.S.P.</option> <option value="js">JavaScript</option> <option value="php">PHP</option> <option value="HTML" selected="selected">HTML</option> </optgroup> <optgroup label="Русские"> <option value="asp_rus">ASP Rusça</option> <option value="js_rus">Rusça JavaScript</option> </optgroup> </select></p> <p><img src='https://i0.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-69.png' height="202" width="211" loading=lazy loading=lazy><br>Fırsatı sağlamak <b>aynı anda birden fazla öğe seçme</b> multiple özelliğini eklemeniz gerekir. Ancak bu durumda size özelliğinin de 1'den büyük bir değere ayarlanması gerekir:</p> <p><textarea name="description" cols="30" rows="10">Metin

Sonuç:

• Bir öğenin genişliği, yatay olarak kaç karakterin sığacağını belirten cols özelliğine bağlıdır.
• Rows özelliği, bir öğedeki satır sayısını belirtir.

Diğer unsurlar

Ek öğeler ve nitelikler

• Kontroller için radyo Ve onay kutusu ilk olarak metni radyo veya onay kutusu öğesinin kendisine sabitleyen ve ikinci olarak tıklandığında bir kontur ekleyen ek öğelerin kullanılması uygundur:

<giriş türü = "onay kutusu" kimliği = "kitap1" > <= "kitap1" için etiket > A.S.P.</etiket>

A.S.P.

Örnekte onay kutusu elemanı için bir yazıt (etiket etiketi) oluşturulmuştur. Bağlama, değeri etiketin for özelliğinde belirtilen id özelliği aracılığıyla yapılır.

Sonuç:

A.S.P.
javascript

Günümüzde neredeyse hiçbir web sitesi metin giriş alanları, düğmeler, anahtarlar ve onay kutuları gibi arayüz unsurları olmadan yapamaz. Bunlar, kullanıcının anahtar kelimeler kullanarak sitede arama yapabilmesi, yorum yazabilmesi, anketleri yanıtlayabilmesi, fotoğraf ekleyebilmesi ve buna benzer daha birçok şey yapabilmesi için kullanıcı etkileşimi için gereklidir. Verilerin kullanıcıdan alınıp sunucuya aktarılmasını, burada zaten analiz edilip işlenmesini sağlayan formlardır. Yani sitede benzer bir şey yapmayı planlıyorsanız bunu formlar olmadan uygulamanız mümkün olmayacaktır.

Formun kendisi etiketi kullanılarak oluşturulur Gerekli etiketleri içerebilen ve aşağıdaki isteğe bağlı parametrelerle karakterize edilen:

1. form verilerinin içeriğini işleyecek olan programın web sunucusundaki adresi;
2. kullanıcı girişi için standart alanlar olan form öğeleri;
3. Sunucuya veri göndermek için düğme.

Bir sayfada birden fazla form kullanılmasına izin verilir ancak bunlar iç içe yerleştirilmemelidir (örnek 1).

Örnek 1: Formların hatalı kullanımı

HTML5 IE Cr Op Sa Fx

Tarayıcı, verileri göndermeden önce bilgiyi ad=değer çifti olarak hazırlar; burada ad, etiketin ad niteliğine göre belirlenir. veya formdaki başka bir geçerli etiket ve değer kullanıcı tarafından girilir veya varsayılan form alanına ayarlanır. Kullanıcı Gönder düğmesini tıkladıktan sonra, forma girilen bilgileri alan ve geliştiricinin amaçladığı şeyi yapan form işleyicisi çağrılır. Form işleyicisi genellikle etiketin action özelliği tarafından belirtilen bir programdır.

Eylem özelliği değeri olarak mailto: anahtar sözcüğüyle başlayan bir e-posta adresi de belirtebilirsiniz. Formu gönderdiğinizde varsayılan e-posta programınız başlatılacaktır. Güvenlik nedeniyle tarayıcı, forma girilen bilgilerin gizlice posta yoluyla gönderilmesini engelleyecek şekilde ayarlanmıştır. Verileri doğru şekilde yorumlamak için etiketteki text/plain değeriyle birlikte enctype özelliğini kullanın.

Tarayıcıların bu kodla çalışma sorunları var. Firefox, posta göndermek için uygun uygulamaların bir listesini sunacak (Şekil 1), Internet Explorer bir uyarı görüntüleyecek (Şekil 2) ve postayla ilişkili programı başlatmaya çalışacak, Opera, Firefox gibi uygun seçeneklerin bir listesini sunacak posta göndermek için (Şek. 3).

Pirinç. 1. Uygulamayı Firefox'ta başlatın

Pirinç. 2. Internet Explorer Uyarısı

Pirinç. 3. Opera'da program seçme