Kontrol server HTML pada dasarnya adalah kontrol HTML standar yang ditingkatkan untuk memastikan pengoperasian server. Kontrol HTML tidak diproses oleh server, tetapi dikirim ke browser untuk ditampilkan, seperti tag judul halaman, tag link, dan elemen input.
Dengan menambahkan atribut runat = "server" dan atribut id, keduanya dapat secara khusus diubah menjadi kontrol server untuk digunakan dalam pemrosesan sisi server.
Misalnya, kontrol masukan HTML:
<input type="text" size="40">Itu dapat diubah menjadi kontrol server dengan menambahkan atribut runat dan id:
<input type="text" id="testtext" size="40" runat="server">Meskipun kontrol server ASP.NET dapat melakukan semua hal yang dilakukan kontrol server HTML, kontrol HTML masih memiliki keunggulan dalam situasi berikut:
Gunakan ekspresi statis untuk tujuan tata letak.
Konversikan halaman HTML agar dijalankan di bawah ASP.NET.
Tabel berikut menjelaskan kontrol server HTML:
| Nama kontrol | tanda HTML |
|---|---|
| HtmlKepala | elemen <kepala> |
| HtmlInputTombol | <tipe masukan=tombol|kirim|reset> |
| HtmlInputKotak centang | <tipe masukan=kotak centang> |
| HtmlInputFile | <tipe masukan = file> |
| HtmlInputTersembunyi | <tipe masukan = tersembunyi> |
| HtmlInputImage | <tipe masukan = gambar> |
| HtmlInputPassword | <tipe masukan = kata sandi> |
| HtmlInputRadioButton | <tipe masukan = radio> |
| HtmlInputReset | <tipe masukan = setel ulang> |
| HtmlTeks | <tipe masukan = teks|kata sandi> |
| HtmlGambar | elemen <img> |
| Tautan Html | elemen <tautan> |
| HtmlAnchor | <a>elemen |
| Tombol Html | elemen <tombol> |
| Tombol Html | elemen <tombol> |
| Formulir Html | elemen <bentuk> |
| HtmlTabel | elemen <tabel> |
| HtmlTableCell | <td> dan <th> |
| HtmlTableRow | <tr>elemen |
| Judul Html | elemen <judul> |
| HtmlPilih | <pilih&t; |
| HtmlGenericControl | Semua kontrol HTML tidak terdaftar |
Contoh berikut menggunakan tabel HTML dasar untuk tata letak. Ini menggunakan kotak untuk mendapatkan masukan dari pengguna seperti nama, alamat, kota, negara bagian, dll., dan tombol kontrol yang ketika diklik akan menampilkan data pengguna di baris terakhir tabel.
Halamannya akan terlihat seperti ini dalam tampilan Desain:
Kode untuk halaman konten menunjukkan penggunaan elemen tabel HTML untuk tata letak.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="htmlserver._Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <style type="text/css"> .style1 { width: 156px; } .style2 { width: 332px; } </style> </head> <body> <form id="form1" runat="server"> <div> <table> <tr> <td>Name:</td> <td> <asp:TextBox ID="txtname" runat="server" > </asp:TextBox> </td> </tr> <tr> <td>Street</td> <td> <asp:TextBox ID="txtstreet" runat="server" > </asp:TextBox> </td> </tr> <tr> <td>City</td> <td> <asp:TextBox ID="txtcity" runat="server" > </asp:TextBox> </td> </tr> <tr> <td>State</td> <td> <asp:TextBox ID="txtstate" runat="server"> </asp:TextBox> </td> </tr> <tr> <td> </td> <td></td> </tr> <tr> <td></td> <td ID="displayrow" runat ="server"> </td> </tr> </table> </div> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Click" /> </form> </body></html>Kode di balik kontrol tombol adalah:
protected void Button1_Click(object sender, EventArgs e){ string str = ""; str += txtname.Text + "<br />"; str += txtstreet.Text + "<br />"; str += txtcity.Text + "<br />"; str += txtstate.Text + "<br />"; displayrow.InnerHtml = str;}Perhatikan pernyataan berikut:
Tag HTML standar telah digunakan untuk tata letak halaman.
Baris terakhir tabel HTML digunakan untuk menampilkan data. Ini memerlukan pemrosesan sisi server, jadi tambahkan atribut ID dan atribut runat ke dalamnya.