Form Yayasan
Yayasan Bentuk kontrol otomatis diatur ke gaya global yang:
Semua <textarea>
, <select>
dan <input>
lebar elemen adalah 100%, dan dengan margin, padding, bayangan minum efek gerakan mouse.
contoh
<Form>
Input:
<Input type = "text" placeholder = "Nama">
textarea:
<Textarea baris = "4" placeholder = "Alamat"> </ textarea>
pilih:
<Pilih>
<Option> 1 </ option>
<Pilihan> 2 </ option>
<Pilihan> 3 </ option>
<Pilihan> 4 </ option>
</ Pilih>
</ Form>
Input:
<Input type = "text" placeholder = "Nama">
textarea:
<Textarea baris = "4" placeholder = "Alamat"> </ textarea>
pilih:
<Pilih>
<Option> 1 </ option>
<Pilihan> 2 </ option>
<Pilihan> 3 </ option>
<Pilihan> 4 </ option>
</ Pilih>
</ Form>
Coba »
label
Gunakan form <label>
elemen untuk mengatur label, label dapat ditambahkan untuk atribut dan atribut id. Dapatkan kotak input pengguna dalam fokus ketika field input atau klik pada tab:
contoh
<Form>
<Label untuk = "nama"> Masukan
<Input type = "text" placeholder = "Nama" id = "nama">
</ Label>
<Label untuk = "adr"> Label
<Textarea baris = "4" placeholder = "Alamat" id = "adr"> </ textarea>
</ Label>
<Label untuk = "num"> Pilih
<Pilih id = "num">
<Option> 1 </ option>
<Pilihan> 2 </ option>
<Pilihan> 3 </ option>
<Pilihan> 4 </ option>
</ Pilih>
</ Label>
</ Form>
<Label untuk = "nama"> Masukan
<Input type = "text" placeholder = "Nama" id = "nama">
</ Label>
<Label untuk = "adr"> Label
<Textarea baris = "4" placeholder = "Alamat" id = "adr"> </ textarea>
</ Label>
<Label untuk = "num"> Pilih
<Pilih id = "num">
<Option> 1 </ option>
<Pilihan> 2 </ option>
<Pilihan> 3 </ option>
<Pilihan> 4 </ option>
</ Pilih>
</ Label>
</ Form>
Coba »
Jika Anda perlu mengatur tab kanan-blok, Anda dapat menggunakan .right
kategori:
fieldset
Yayasan Rendering <fieldset>
unsur gaya sebagai berikut:
contoh
<Form>
<Fieldset>
<Legenda> Fieldset Legenda </ legend >
<Label> Nama
<Input type = "text" placeholder = "Nama Pertama ..">
</ Label>
<Label> Email
<Input type = "text" placeholder = "Masukkan email ..">
</ Label>
</ Fieldset>
</ Form>
<Fieldset>
<Legenda> Fieldset Legenda </ legend >
<Label> Nama
<Input type = "text" placeholder = "Nama Pertama ..">
</ Label>
<Label> Email
<Input type = "text" placeholder = "Masukkan email ..">
</ Label>
</ Fieldset>
</ Form>
Coba »
Status kesalahan
Gunakan .error
kelas untuk mengatur label yang salah, kotak input, teks kotak gaya:
contoh
<Form>
<Class Label = "error"> Kesalahan
<Input type = "text" placeholder = "Nama ..">
</ Label>
<Kelas kecil = "error"> masukan Salah </ small>
<Textarea baris = "4" placeholder = "Alamat"> </ textarea>
<Kelas kecil = "error"> masukan Salah </ small>
</ Form>
<Class Label = "error"> Kesalahan
<Input type = "text" placeholder = "Nama ..">
</ Label>
<Kelas kecil = "error"> masukan Salah </ small>
<Textarea baris = "4" placeholder = "Alamat"> </ textarea>
<Kelas kecil = "error"> masukan Salah </ small>
</ Form>
Coba »
Anda perlu menggunakan JavaScript untuk memperbarui status kesalahan input pengguna. |