Gunakan CSS untuk secara otomatis menambahkan asterisk 'bidang wajib' untuk membentuk input


133

Apa cara yang baik untuk mengatasi fakta yang tidak menguntungkan bahwa kode ini tidak akan berfungsi seperti yang diinginkan:

<div class="required">
    <label>Name:</label>
    <input type="text">
</div>

<style>
    .required input:after { content:"*"; }
</style>

Di dunia yang sempurna, semua yang diperlukan inputakan mendapatkan tanda bintang kecil yang menunjukkan bahwa bidang tersebut diperlukan. Solusi ini tidak mungkin karena CSS dimasukkan setelah konten elemen, bukan setelah elemen itu sendiri, tetapi sesuatu seperti itu akan ideal. Di situs dengan ribuan bidang yang diperlukan, saya bisa memindahkan tanda bintang di depan input dengan satu perubahan ke satu baris ( :afterke :before) atau saya bisa memindahkannya ke akhir label ( .required label:after) atau di depan label, atau ke posisi pada kotak yang berisi, dll ...

Ini penting bukan hanya jika saya berubah pikiran tentang di mana menempatkan tanda bintang di mana-mana, tetapi juga untuk kasus aneh di mana tata letak formulir tidak memungkinkan tanda bintang pada posisi standar. Itu juga bermain baik dengan validasi yang memeriksa formulir atau menyoroti kontrol yang tidak lengkap.

Terakhir, itu tidak menambahkan markup tambahan.

Apakah ada solusi bagus yang memiliki semua atau sebagian besar kelebihan dari kode mustahil?


mungkin menerapkan gambar latar belakang tanda bintang?
Valamas

Untuk membuat bidang input benar-benar diperlukan , tambahkan requiredatribut ke <input... developer.mozilla.org/en-US/docs/Web/HTML/Element/input/…
tomByrer

Jawaban:


230

Apakah itu yang ada dalam pikiran Anda?

http://jsfiddle.net/erqrN/1/

<label class="required">Name:</label>
<input type="text">

<style>
  .required:after {
    content:" *";
    color: red;
  }
</style>

Lihat https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements


2
Itu adalah solusi yang baik dalam banyak situasi, namun itu tidak berfungsi jika penentuan posisi absolut atau pelampung digunakan untuk menyejajarkan formulir (mis. Jsfiddle.net/erqrN/2 ). Saya sebenarnya menggunakan penentuan posisi absolut untuk mengatur form saya. Saya benar-benar dapat memposisikannya *tetapi itu berarti bahwa saya harus secara manual menempatkan jarak untuk setiap panjang input formulir, dan tidak akan dapat memiliki input fleksibel.
brentonstrine

4
@ brentonstrine Mustahil, Anda seharusnya tidak menggunakan penentuan posisi absolut untuk mengatur form Anda. Meskipun umum digunakan, penentuan posisi absolut tidak responsif (kecuali jika Anda memiliki JS yang mengubah ukuran DOM), sementara efek yang sama selalu dapat dicapai dengan menggunakan posisi statis atau relatif, yang dapat responsif dalam desain. Pembaca, harap hindari menggunakan gaya seperti penentuan posisi absolut pada hal-hal seperti elemen bentuk, karena ini adalah pendekatan yang cukup kuno untuk penentuan posisi. Saya tahu komentar Anda sudah sangat tua, tetapi ini untuk pembaca.
WebWanderer

Tanda bintang tidak muncul menggunakan Lynx , yang bisa menjadi masalah aksesibilitas.
Dave Jarvis

dapatkah saya memasukkan ini ke dalam .css? Jika ya, bisakah Anda memberi contoh? Saya tidak tahu itu : sintaksis
Leonardo Maffei


68
.required label {
    font-weight: bold;
}
.required label:after {
    color: #e32;
    content: ' *';
    display:inline;
}

Biasakan dengan struktur persis Anda: http://jsfiddle.net/bQ859/


Anda masih membutuhkan kelas pada label Anda, benar-benar satu-satunya cara untuk menjaga struktur dokumen tetap rapi adalah metode gambar latar belakang. Meskipun ringkas.
Kucing Henry

37

Meskipun ini adalah jawaban yang diterima, silakan mengabaikan saya dan menggunakan :aftersintaks yang disarankan di bawah. Solusi saya tidak dapat diakses.


Hasil yang serupa dapat dicapai dengan menggunakan gambar latar belakang dari sebuah gambar asterisk dan mengatur latar belakang label / input / div luar dan lapisan ukuran gambar asterisk. Sesuatu seperti ini:

.required input {
   padding-right: 25px;
   background-image: url(...);
   background-position: right top;
}

Ini akan menempatkan tanda bintang DI DALAM kotak teks, tetapi menempatkan yang sama pada div.requiredbukannya .required inputmungkin akan lebih apa yang Anda cari, jika sedikit kurang elegan.

Metode ini tidak memerlukan input tambahan.


5
Namun perlu dicatat bahwa ini tidak ramah pembaca layar. Jawaban Max jauh lebih baik dalam hal ini. Bahkan dalam banyak kasus, jawaban Max lebih ideal - tidak untuk OP.
jaypeagi

20

Untuk memasukkannya dengan tepat KE input seperti yang ditunjukkan pada gambar berikut:

masukkan deskripsi gambar di sini

Saya menemukan pendekatan berikut:

.asterisk_input::after {
content:" *"; 
color: #e32;
position: absolute; 
margin: 0px 0px 0px -20px; 
font-size: xx-large; 
padding: 0 5px 0 0; }
 <form>
    <div>              
        <input type="text" size="15" />                                 
        <span class="asterisk_input">  </span>            
    </div>            
</form> 

Situs tempat saya bekerja diberi kode menggunakan tata letak tetap sehingga tidak masalah bagi saya.

Saya tidak yakin itu bagus untuk desain cair.


ya, tampilannya sama. Perbedaannya adalah dia menggunakan background-image. (atau saya salah paham sesuatu)
Tebe

2
menambahkan markup span kosong untuk sesuatu seperti ini mengalahkan seluruh poin css, bukan?
Jason Silver

1
rentang biaya apa-apa, itu adalah trik umum untuk menyederhanakan hal-hal yang cukup sering ditemukan di antara sejumlah besar perpustakaan yang pernah saya lihat
Tebe

14

tulis dalam CSS

.form-group.required .control-label:after {content:"*";color:red;}

dan HTML

<div class="form-group required">

    <label class="control-label">Name:</label>

    <input type="text">

</div>

Saya pikir pendekatan Anda hanya bekerja jika Anda menetapkan kelas label kontrol di tag label suka <label class="control-label">...</label>. Tapi itu berhasil (Y)
MarcoLe

Saya hanya memberi Anda contoh contoh label kontrol tujuan Mr.creep-story
Kondal

Ini memiliki sintaks elemen pseudo yang lebih tua plus tidak perlu untuk sup div. Saya telah menambahkan jawaban yang menjaga bentuk div dan kelas gratis.
Kucing Henry

12
input[required]{
    background-image: radial-gradient(#F00 15%, transparent 16%), radial-gradient(#F00 15%, transparent 16%);
    background-size: 1em 1em;
    background-position: right top;
    background-repeat: no-repeat;
}

mengapa ada dua radial-gradientistilah background-image? Saya tidak bisa mendapatkan sintaks ini untuk menikah dengan developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient namun bekerja dengan benar ketika saya mencobanya.
Chris Walsh

Ini lebih disukai karena tidak memerlukan markup tambahan untuk membuatnya berfungsi. Saya ingin melihat solusi yang memanfaatkan :: after untuk opsi yang lebih dapat disesuaikan.
Jason Silver

10
input[required], select[required] {
    background-image: url('/img/star.png');
    background-repeat: no-repeat;
    background-position-x: right;
}

Gambar memiliki ruang 20px di sebelah kanan untuk tidak tumpang tindih dengan panah dropdown pilih

masukkan deskripsi gambar di sini

Dan terlihat seperti ini: masukkan deskripsi gambar di sini


Ini menginspirasi, lihat cara saya menghindari keharusan memuat gambar latar belakang.
Kucing Henry

5

Gunakan jQuery dan CSS

jQuery(document).ready(function() {
 jQuery("[required]").after("<span class='required'>*</span>");
});
.required {
    position: absolute;
    margin-left: -10px;
    color: #FB0000;
    font-size: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="xxx" required>


5

Saya pikir ini adalah cara yang efisien untuk dilakukan, mengapa sangat sakit kepala

    <div class="full-row">
     <label for="email-id">Email Address<span style="color:red">*</span></label>
  <input type="email" id="email-id" name="email-id"  ng-model="user.email" >
    </div> 

Perhatikan rentang diterapkan ke tag label dan bukan tag input. Jika diaplikasikan pada tag input, tanda bintang merah turun ke baris berikutnya - yang bukan yang diinginkan sebagian besar
pengembang

5

Ini 2019 dan jawaban sebelumnya untuk masalah ini tidak digunakan

  1. Kotak CSS
  2. Variabel CSS
  3. Elemen formulir HTML5
  4. SVG dalam CSS

Kotak CSS adalah cara untuk melakukan formulir pada 2019 karena Anda dapat memiliki label sebelum input Anda tanpa memiliki div, bentang, bentang dengan tanda bintang tambahan di dan peninggalan lainnya.

Di sinilah kita akan pergi dengan CSS minimal:

Contoh tangkapan layar

HTML untuk yang di atas:

<form action="https://www.example.com/register/" method="post" id="form-validate" enctype="multipart/form-data">
    <p class="form-instructions">Please enter the following information to create your account.</p>
    <label for="firstname">First name</label>
    <input type="text" id="firstname" name="firstname" value="" title="First name" maxlength="255" required="">
    <label for="lastname">Last name</label>
    <input type="text" id="lastname" name="lastname" value="" title="Last name" maxlength="255" required="">
    <label for="email_address">Email address</label>
    <input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="email_address" value="" title="Email address" size="30" required="">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" title="Password" required="">
    <label for="confirmation">Confirm password</label>
    <input type="password" name="confirmation" title="Confirm password" id="confirmation" required="">
    <input type="checkbox" name="is_subscribed" title="Subscribe to our newsletter" value="1" id="is_subscribed" class="checkbox">
    <label for="is_subscribed">Subscribe to the newsletter</label>
    <input type="checkbox" name="persistent_remember_me" id="remember_meGCJiRe0GbJ" checked="checked" title="Remember me">
    <label for="remember_meGCJiRe0GbJ">Remember me</label>
    <p class="required">* Required</p>
    <button type="submit" title="Register">Register</button>
</form>

Teks Placeholder dapat ditambahkan juga dan sangat disarankan. (Saya hanya menjawab mid-form ini).

Sekarang untuk variabel CSS:

--icon-required: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-10 -6 16 16"> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(15)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(75)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(-45)"></line> \
</svg>');

--icon-tick: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="-2 -2 16 16"> \
            <path fill="green" stroke-linejoin="round" d="M2 6L1 7l3 4 7-10h-1L4 8z"/> \
</svg>');

CSS untuk elemen formulir:

input[type=text][required],
input[type=email][required],
input[type=password][required],
input[type=tel][required] {
    background-image: var(--icon-required);
    background-position-x: right;
    background-repeat: no-repeat;
    background-size: contain;
}

input:valid {
    --icon-required: var(--icon-tick);
}

Formulir itu sendiri harus dalam kotak CSS:

form {
    align-items: center;
    display: grid;
    grid-gap: var(--form-grid-gap);
    grid-template-columns: var(--form-grid-template-columns);
    margin: auto;
}

Nilai untuk kolom dapat diatur ke 1fr autoatau 1frdengan apa pun seperti <p>tag dalam formulir yang ditetapkan untuk rentang 1 / -1. Anda mengubah variabel dalam kueri media Anda sehingga Anda memiliki kotak input menjadi lebar penuh di ponsel dan sesuai di atas pada desktop. Anda juga dapat mengubah celah jaringan di ponsel jika diinginkan dengan menggunakan pendekatan variabel CSS.

Ketika kotak-kotak itu valid maka Anda harus mendapatkan tanda centang hijau alih-alih tanda bintang.

SVG dalam CSS adalah cara untuk menyelamatkan browser dari keharusan melakukan bolak-balik ke server untuk mendapatkan gambar tanda bintang. Dengan cara ini Anda dapat menyempurnakan tanda bintang, contoh-contoh di sini berada pada sudut yang tidak biasa, Anda dapat mengeditnya karena ikon SVG di atas sepenuhnya dapat dibaca. Kotak view juga dapat diubah untuk menempatkan tanda bintang di atas atau di bawah pusat.


1

.asterisc {
  display: block;
  color: red;
  margin: -19px 185px;
}
<input style="width:200px">
<span class="asterisc">*</span>


0

Contoh ini menempatkan simbol tanda bintang di depan label untuk menunjukkan input tertentu sebagai bidang wajib. Saya mengatur properti CSS menggunakan% dan em untuk memastikan halaman web saya responsif. Anda dapat menggunakan px atau unit absolut lainnya jika Anda mau.

#name {
   display: inline-block;
   margin-left: 40%;
   font-size:25px;
    
}
.nameinput{
   margin-left: 10px;
   font-size:90%;
   width: 17em;
   
}

.nameinput::placeholder {
  font-size: 0.7em;
  vertical-align: middle;
}

#name p{
   margin:0;
   border:0;
   padding:0;
   display:inline-block;
   font-size: 40%;
   vertical-align: super;
}
<label id="name" value="name">
<p>*</p> 
Name:  <input class="nameinput" type="text" placeholder="Enter your name" required>
</label>


Selamat datang di SO! Ketika Anda menempatkan jawaban dengan pandangan baru untuk tampilan, cobalah untuk menjelaskan jawaban Anda, bukan hanya menempatkan kode tanpa penjelasan.
David García Bodego

0

Yang Anda butuhkan adalah: pemilih yang diperlukan - itu akan memilih semua bidang dengan atribut 'wajib' (jadi tidak perlu menambahkan kelas tambahan). Kemudian - masukan gaya sesuai dengan kebutuhan Anda. Anda dapat menggunakan pemilih ': setelah' dan menambahkan tanda bintang dengan cara yang disarankan di antara jawaban lainnya


-1

Anda dapat mencapai hasil yang diinginkan dengan merangkum kode HTML dalam tag div yang berisi kelas "wajib" diikuti oleh kelas "formulir-grup". * Namun ini hanya berfungsi jika Anda memiliki Bootstrap.

<div class="form-group required">
    <div class="required">
        <label>Name:</label>
        <input type="text">
    </div>
  <div>

-2

Bagi mereka yang berakhir di sini, tetapi memiliki jQuery:

// javascript / jQuery
$("label.required").append('<span class="red-star"> *</span>')

// css
.red-star { color: red; }

Mengapa menggunakan js jika Anda dapat mencapai hasil yang sama tanpa js?
Vitaly Zdanevich

@VitalyZdanevich karena Anda perlu memuat gambar latar belakang yang tidak perlu dengan solusi itu. Juga, saya sudah memiliki js (karena banyak orang lain juga akan).
Andy Hayden
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.