Bilmeniz Gereken 11 Kullanışlı HTML Özniteliği

HTML, web’in yapı taşıdır. Bu biçimlendirme dilinin daha azca malum, sadece yararlı kısımlarını bilmek hayatınızı oldukca daha kolay hale getirebilir. HTML öznitelikleri, HTML’den en iyi şekilde kurtulmanıza destek olabilecek çeşitli özellikler sağlar. Bir HTML öğesinin ek özelliklerini yada özelliklerini tanımlar.

Bu makalede, muhtemelen hemen hemen duymadığınız 11 HTML özniteliği hakkında informasyon edineceksiniz.

1. çoklu

Bu öznitelik, kullananların birden oldukca kıymet girmesini sağlar. Birden oldukca özniteliği etiketler ve
Etiketler. Bu boole özniteliği yalnızca e-posta yada dosya giriş türleri için geçerlidir.

Birden Fazlaca Öznitelik KullanmaEtiket

Select languages:


C++


Python


JavaScript


Java

Dosya Girişi için birden oldukca Öznitelik Kullanma

Dosya girişi için birden oldukca özniteliği kullanarak, birden oldukca dosya seçebilirsiniz ( Vardiya yada Ctrl tuşları).

E-posta Girişi için birden oldukca Öznitelik kullanma

E-posta girişi için birden oldukca özniteliği kullanarak virgülle ayrılmış e-posta adreslerinin bir listesini girebilirsiniz. Listedeki her adresten tüm boşluklar kaldırılır.

2. memnun edici

Contenteditable özniteliğini kullanarak HTML içeriğini bir web sayfasında düzenlenebilir hale getirebilirsiniz. Bu genel bir özniteliktir, şu demek oluyor ki tüm HTML öğeleri için ortaktır.

Lorem ipsum dolor sit amet, consectetur adipisicing seçkin,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.

3. yazım denetimi

Yazım denetimi özniteliği, öğenin yazım hataları açısından denetlenip denetlenmeyeceğini belirtir. Metni </strong> öğeler, düzenlenebilir öğelerdeki metin yada giriş öğelerindeki metin (parolalar hariç).</p><br /> <pre><code class=”hljs perl”></p><br /> <p contenteditable=”true” spellcheck=”true”>Lorem ipsum dolor sit amet, consectetur adipisicing seçkin,<br />sed do eiusmod tempor incididunt ut labore et dolore magna<br />aliqua. Ut enim ad minim veniam, quis nostrud exercitation<br />ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><br /> <p></code></pre><br /> <p><span class=”related-single”>İlgili: HTML Essentials Hile Sayfası: Etiketler, Öznitelikler ve Daha Fazlası</span></p><br /> <h2 id=”download”><br /> 4. indirin</h2><br /> <p>İndirme özniteliğini kullanarak bir kaynak indirebilirsiniz. İndirme özniteliği, tarayıcıya belirtilen URL’ye gitmek yerine indirmesini söyler. İndirme özniteliğini <strong><a></strong> etiket ve <strong></p><br /> <area></strong> etiket.</p><br /> <p><strong>Not</strong>: İndirme özniteliği yalnızca aynı kaynaklı URL’lerle çalışır. Aynı köken politikasının kurallarına uyar.</p><br /> <pre><code class=”hljs perl”>Download</code></pre><br /> <h2 id=”accept”><br /> 5. kabul</h2><br /> <p>Accept özniteliği <strong><input></strong> etiketi, kullanıcının yükleyebileceği dosya türünü belirtir. Kıymeti olarak bir yada daha çok dosya türünün virgülle ayrılmış listesini belirtebilirsiniz.</p><br /> <h3 id=”accepting-an-audio-file”>Ses Dosyasını Kabul Etme</h3><br /> <pre><code class=”hljs perl”><input type=”file” id=”audioFile” accept=”audio/*”></code></pre><br /> <h3 id=”accepting-a-video-file”>Video Dosyasını Kabul Etme</h3><br /> <pre><code class=”hljs perl”><input type=”file” id=”videoFile” accept=”video/*”></code></pre><br /> <h3 id=”accepting-an-image-file”>Fotoğraf Dosyasını Kabul Etme</h3><br /> <pre><code class=”hljs perl”><input type=”file” id=”imageFile” accept=”image/*”></code></pre><br /> <h3 id=”accepting-a-microsoft-word-file”>Microsoft Word Dosyasını Kabul Etme</h3><br /> <pre><code class=”hljs perl”><input type=”file” id=”docpicker”<br />accept=”.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document”></code></pre><br /> <h3 id=”accepting-png-or-jpeg-files”>PNG yada JPEG Dosyalarını Kabul Etme</h3><br /> <pre><code class=”hljs perl”><input type=”file” id=”imageFile” accept=”.png, .jpg, .jpeg”></code></pre><br /> <h3 id=”accepting-a-pdf-file”>PDF Dosyasını Kabul Etme</h3><br /> <pre><code class=”hljs perl”><input type=”file” id=”pdfFile” accept=”.pdf”></code></pre><br /> <p><span class=”related-single”>İlgili: Her insanın Web Sitelerine Ekleyebileceği Mükemmel HTML Efektleri</span></p><br /> <h2 id=”translate”><br /> 6. tercüme</h2><br /> <p>Translate özniteliği, sayfa yerelleştirildiğinde öğenin çevrilmesi yada çevrilmemesi icap ettiğini tarayıcıya bildirir. 2 kıymeti olabilir: “evet” yada “hayır”.</p><br /> <pre><code class=”hljs perl”></p><br /> <p translate=”no”>Lorem ipsum dolor sit amet, consectetur adipisicing seçkin,<br />sed do eiusmod tempor incididunt ut labore et dolore magna<br />aliqua. Ut enim ad minim veniam, quis nostrud exercitation<br />ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><br /> <p></code></pre><br /> <p><span class=”related-single”>İlgili: 10 Dakikada Öğrenebileceğiniz Rahat HTML Kodu Örnekleri</span></p><br /> <h2 id=”poster”><br /> 7. poster</h2><br /> <p>Poster özniteliği, video indirilirken yada kullanıcı videoyu oynatana kadar bir görüntüyü göstermek için kullanılır.</p><br /> <p><strong>Not</strong>: Hiçbir şey belirtmezseniz, ilk kare kullanılabilir olana kadar hiçbir şey görüntülenmez. İlk kare kullanılabilir olduğunda, poster çerçevesi olarak gösterilir.</p><br /> <pre><code class=”hljs perl”><video controls<br />src=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4″<br />poster=”posterImage.png”><br /></video></code></pre><br /> <h2 id=”inputmode”><br /> 8. girişmode</h2><br /> <p>Inputmode özniteliği, kullanıcı herhangi bir giriş yada textarea öğesi seçtiğinde hangi klavyenin görüntüleneceğini tarayıcıyı gösterir. Bu öznitelik çeşitli değerleri kabul eder:</p><br /> <h3 id=”none”>Asla kimse</h3><br /> <pre><code class=”hljs perl”><input type=”text” inputmode=”none” /></code></pre><br /> <h3 id=”numeric”>Sayısal</h3><br /> <pre><code class=”hljs perl”><input type=”text” inputmode=”numeric” /></code></pre><br /> <h3 id=”tel”>Tel</h3><br /> <pre><code class=”hljs perl”><input type=”text” inputmode=”tel” /></code></pre><br /> <h3 id=”decimal”>On -da -lık</h3><br /> <pre><code class=”hljs perl”><input type=”text” inputmode=”decimal” /></code></pre><br /> <h3 id=”email”>E-posta</h3><br /> <pre><code class=”hljs perl”><input type=”text” inputmode=”email” /></code></pre><br /> <h3 id=”url”>URL</h3><br /> <pre><code class=”hljs perl”><input type=”text” inputmode=”url” /></code></pre><br /> <h3 id=”search”>Aramak</h3><br /> <pre><code class=”hljs perl”><input type=”text” inputmode=”search” /></code></pre><br /> <h2 id=”pattern”><br /> 9. desen</h2><br /> <p>Desen özniteliği <strong><input></strong> element, öğenin değerinin doğrulanacağı düzgüsel bir ifade belirtmenizi sağlar. Desen özniteliğini metin, tarih, arama, URL, tel, e-posta ve parola benzer biçimde çeşitli giriş çeşitleriyle kullanabilirsiniz.</p><br /> <pre><code class=”hljs perl”></p><br /> <form><input name=”username” id=”username” pattern=”(A-Za-z0-9)+”> <br /></form><br /> <p></code></pre><br /> <p><span class=”related-single”>İlgili: Kaliteli HTML Kodlama Örnekleri için En İyi Siteler</span></p><br /> <h2 id=”autocomplete”><br /> 10. otomatik tamamlama</h2><br /> <p>Otomatik tamamlama özniteliği, tarayıcının kullanıcı girişlerine nazaran girişi otomatikman tamamlayıp tamamlamayacağını belirtir. Otomatik tamamlama özniteliğini metin, arama, URL, tel, e-posta, parola, tarih seçiciler, aralık ve renk benzer biçimde çeşitli giriş çeşitleriyle kullanabilirsiniz. Bu özniteliği <strong><input></strong> öğeler yada <strong></p><br /> <form><p> </strong>Unsur.</p><br /> <pre><code class=”hljs perl”><input name=”credit-card-number” id=”credit-card-number” autocomplete=”off”></code></pre><br /> <h2 id=”autofocus”><br /> 11. otomatik odaklama</h2><br /> <p>Otomatik netleme özniteliği, bir öğenin sayfa yüküne odaklanması icap ettiğini gösteren bir boole özniteliğidir. Bu özniteliği <strong><button></strong>, <strong><input></strong>, <strong><keygen></strong>, <strong><select></strong>yada <strong><textarea></strong> Unsur.</p><br /> <h3 id=”using-autofocus-attribute-with-input-element”>Giriş Öğesiyle Otomatik Netleme Özniteliğini Kullanma</h3><br /> <pre><code class=”hljs perl”><input type=”text” autofocus></code></pre><br /> <h3 id=”using-autofocus-attribute-with-select-element”>Otomatik netleme Özniteliğini seçme Öğesiyle kullanma</h3><br /> <pre><code class=”hljs perl”><select name=”languages” id=”languages”><br /><option value=”C++”><br />C++<br /></option><br /><option value=”Python”><br />Python<br /></option><br /><option value=”JavaScript”><br />JavaScript<br /></option><br /><option value=”Java”><br />Java<br /></option><br /></select></code></pre><br /> <h3 id=”using-autofocus-attribute-with-textarea-element”>Textarea Öğesiyle Otomatik Odaklama Özniteliğini Kullanma</h3><br /> <pre><code class=”hljs perl”><textarea autofocus><br />Lorem ipsum dolor sit amet, consectetur adipisicing seçkin,<br />sed do eiusmod tempor incididunt ut labore et dolore magna<br />aliqua. Ut enim ad minim veniam, quis nostrud exercitation<br />ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />

Bu makalede kullanılan kaynak kodunun tamamına bakmak istiyorsanız GitHub deposuna göz atın.

JavaScript Tek Satırlı Hatlarla Hayatınızı Kolaylaştırın

Tek satırlı kod, daha azca kodla daha fazlasını elde etmeye destek verir. Bir ustalaşmış benzer biçimde kodlamak için birkaç JavaScript tek satırlık kullanabilirsiniz.

Yalnızca bir kod satırıyla, bir diziyi karıştırabilir, bir dizinin ortalamasını bulabilir, bir dizinin boş olup olmadığını denetleyebilir, rastgele bir onaltılık renk oluşturabilir, rastgele bir UUID oluşturabilirsiniz.