HTML5 Praktikal PHP Borang Halaman Web Design_html5 Kemahiran Tutorial

HTML5 sangat berbeza daripada HTML sebelumnya dalam banyak aspek seperti struktur halaman dan pemprosesan multimedia. Dalam tutorial ini, kami akan membawa anda menggunakan HTML5, CSS3 dan PHP untuk benar-benar mereka bentuk halaman web penyerahan borang ringkas yang mematuhi piawaian HTML5 Pembaca boleh mempelajari elemen asas halaman borang HTML5 baharu. Pembaca artikel ini adalah mereka yang mempunyai sedikit pengetahuan tentang HTML, CSS dan PHP.

　Lakaran reka bentuk borang

Memandangkan artikel ini bukan tentang mengajar cara membuat photoshop, kami hanya mereka bentuk lakaran borang dan kemudian menggunakan HTML5, CSS3 dan PHP untuk melaksanakannya Lakaran borang yang ingin kami reka adalah seperti di bawah:

▲

Seperti yang anda boleh lihat, dalam lakaran reka bentuk ini, kesan yang kami jangkakan untuk dicapai ialah: apabila pengguna memasukkan nama, kotak teks medan NAMA akan dipaparkan dalam bentuk fokus, dan jika anda melihat dengan teliti, kotak input e-mel ialah bulatan Dalam kotak input sempadan sudut, dan dalam kotak input kawasan teks mesej, anda boleh melihat peta asas latar belakang. Butang hantar ialah butang tersuai.

Mula mereka bentuk

Seterusnya kita mula mereka bentuk borang. Artikel ini akan menggunakan PHP, jadi anda boleh menggunakan mana-mana alat pengaturcaraan PHP untuk membuat fail index.php dahulu, dan kemudian mula menulis borang yang mematuhi piawaian HTML5.

　1) Mengenai DOCTYPE

Dalam HTML5, pengisytiharan DOCTYPE akan menjadi sangat mudah, kodnya adalah seperti berikut:

Salin kod

Kod Seperti berikut:

🎜>


Adakah anda melihatnya dalam HTML5, pengisytiharan jenis di kepala halaman kini hanya memerlukan satu ayat:
　Itu sahaja , anda perlu membandingkan Sila isytiharkannya seperti berikut:

Salin kod

Kod adalah seperti berikut:

.

Seterusnya, kami mula mereka bentuk struktur borang halaman dahulu. lihat, kita dibahagikan kepada kawasan Header dan Badan Utama Kawasan utama borang, dan kawasan Footer adalah kawasan bawah borang. Dalam HTML5, sebenarnya sangat mudah untuk mencapai semua ini, seperti yang ditunjukkan dalam kod berikut:

Salin kod

Kodnya adalah seperti berikut:

content="text/html; charset=utf -8">

="body">

< ;/header>

>
< ;/body>
, pengaki dan bahagian dalam HTML5 Ini Teg pengepala dalam teg menentukan kawasan kepala halaman, bahagian menentukan kawasan utama halaman, dan bahagian pengaki menentukan kawasan ekor halaman. Berbanding dengan div, maknanya lebih jelas dan secara semantik lebih konsisten dengan tabiat penggunaan. Di sini, badan kelas css juga ditentukan untuk mereka menyatukan gaya mereka.
Reka bentuk bahagian borang
Seterusnya mari kita lihat reka bentuk bahagian borang mula-mula lihat kod seperti berikut:





Salin kod
<.>
Kodnya adalah seperti berikut:

Nama
/label>
placeholder="Type Here">
🎜>

Berikut memperkenalkan perbezaan antara teg input dalam HTML5 dan HTML4. Dalam HTML5, teg input juga mempunyai atribut seperti nama dan id. Perbezaan terbesar ialah banyak jenis baharu telah ditambahkan pada atribut jenis dalam HTML5 untuk memenuhi keperluan pengguna Malangnya, tidak semua penyemak imbas pada masa ini menyokong atribut jenis baharu ini, jadi artikel ini hanya menerangkan ciri jenis baharu itu kebanyakan penyemak imbas, seperti type=email yang disebutkan dalam contoh di atas, iaitu kotak teks yang hanya membenarkan pengguna memasukkan e-mel. Walaupun sesetengah penyemak imbas tidak menyokong kotak teks e-mel, ia tidak penting kerana ia akan diiktiraf sebagai kotak teks jenis=teks tradisional Pada sistem iOS, apabila atribut type=e-mel ditemui, ia akan dibuka dengan mudah input. Susun atur papan kekunci e-mel adalah seperti yang ditunjukkan di bawah:

▲
Dalam teg jenis=e-mel, sila beri perhatian kepada atribut pemegang tempat Ia ditetapkan kepada "taip di sini", yang bermaksud bahawa apabila pengguna tidak memasukkan kandungan dalam kotak e-mel ini, teks yang menggesa pengguna untuk masuk akan secara automatik. muncul. Ini sangat menarik. Ia berkesan sebagai peringatan dan lebih berkesan daripada menulis dengan banyak javascript, seperti yang ditunjukkan di bawah: