Latest web development tutorials

bentuk HTML

Bentuk HTML digunakan untuk mengumpulkan berbagai jenis input pengguna.


contoh

contoh online

Buat sebuah teks (bidang Text)
Contoh ini menunjukkan cara membuat kolom teks di halaman HTML. pengguna dapat menulis teks dalam kolom teks.

Buat bidang sandi
Contoh ini menunjukkan bagaimana untuk menciptakan medan sandi HTML.

(Di bawah ini Anda dapat menemukan lebih banyak contoh.)


bentuk HTML

Form adalah daerah yang mengandung unsur bentuk.

elemen bentuk adalah untuk memungkinkan pengguna untuk memasukkan konten dalam bentuk, misalnya: teks bidang (textarea), drop-down, tombol radio (radio-tombol), kotak centang (checkbox) dan sebagainya.

Form menggunakan bentuk tag <form> set:

<form>
.
input 元素
.
</form>


Bentuk HTML - unsur Masukan

Dalam kebanyakan kasus tag form yang digunakan adalah tag input (<input>).

Jenis input jenis atribut (jenis) definisi. Paling sering jenis input yang digunakan adalah sebagai berikut:


bidang teks (text Fields)

Melalui kolom teks <input type = "text"> tag untuk mengatur ketika pengguna mengetik huruf, angka, dan konten lainnya dalam bentuk, bidang teks akan digunakan.

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

Browser menampilkan berikut:

Nama pertama:
Nama belakang:

Catatan: Bentuk itu sendiri tidak terlihat.Juga, di kebanyakan browser, lebar default dari kolom teks adalah 20 karakter.


bidang sandi

Kata bidang dengan tag <input type = "password"> untuk mendefinisikan:

<form>
Password: <input type="password" name="pwd">
</form>

Browser menampilkan efek sebagai berikut:

password:

Catatan: Karakter bidang sandi tidak ditampilkan dalam bentuk teks, tetapi dengan tanda bintang atau titik sebagai gantinya.


tombol radio (Radio Buttons)

<Input type = "radio"> mendefinisikan meja saja pilihan kotak

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

Browser menampilkan efek sebagai berikut:

laki-laki
perempuan

Periksa kotak (Kotak centang)

<Input type = "checkbox"> mendefinisikan sebuah kotak centang. Pengguna perlu memilih satu atau beberapa pilihan dari beberapa pilihan yang diberikan.

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

Browser menampilkan efek sebagai berikut:

Saya memiliki sepeda
Saya punya mobil

tombol (Submit Button) Menyerahkan

<Input type = "submit"> mendefinisikan tombol submit.

Ketika pengguna mengklik tombol OK, isi form akan ditransfer ke file lain. atribut aksi berupa mendefinisikan nama file dari file tujuan. Didefinisikan oleh atribut aksi file biasanya akan menerima input data yang berhubungan dengan pengobatan. :

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

Browser menampilkan efek sebagai berikut:

Username:

Jika Anda mengetik beberapa huruf dalam kotak teks di atas, kemudian klik tombol OK, maka input data ditransfer ke halaman "html_form_action.php". Halaman ini menampilkan hasil yang dimasukkan.


Cobalah contoh yang lebih

tombol radio (tombol radio)
Contoh ini menunjukkan cara membuat tombol radio di HTML.

Periksa kotak (Kotak centang)
Contoh ini menunjukkan bagaimana untuk membuat kotak cek di halaman HTML. Pengguna dapat memilih atau tidak memilih kotak centang.

daftar drop-down yang sederhana
Contoh ini menunjukkan bagaimana untuk membuat drop-down box sederhana di halaman HTML. Drop-down box adalah daftar opsional.

drop-down pra-seleksi daftar
Contoh ini menunjukkan bagaimana untuk membuat daftar drop-down sederhana dengan nilai terpilih.

bidang teks (Textarea)
Contoh ini menunjukkan cara membuat kolom teks (multi-garis kontrol input teks). pengguna dapat menulis teks dalam kolom teks. Karakter ditulis kata-kata tidak terbatas.

Buat tombol
Contoh ini menunjukkan cara membuat sebuah tombol. Anda dapat teks pada tombol dapat disesuaikan.

Cobalah contoh bentuk

Form dengan perbatasan
Contoh ini menunjukkan cara menggambar sebuah kotak di sekitar data dengan judul.

kotak input dan mengkonfirmasi formulir dengan tombol
Contoh ini menunjukkan bagaimana untuk menambahkan halaman formulir. Formulir ini berisi dua field input dan tombol konfirmasi.

Dengan bentuk kotak centang
Formulir ini berisi dua kotak centang, dan tombol konfirmasi.

Form dengan tombol radio
Formulir ini berisi dua kotak dan tombol konfirmasi.

Kirim e-mail dari formulir
Contoh ini menunjukkan bagaimana untuk mengirim e-mail dari formulir.


tag form HTML

Baru: HTML5 label baru

标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签,一般为输入标题
<fieldset> 定义了一组相关的表单元素,并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist> New 指定一个预先定义的输入控件选项列表
<keygen> New 定义了表单的密钥对生成器字段
<output> New 定义一个计算结果