Cara Membuat Borang Kenalan dengan CSS

Mula-mula kita membuat elemen HTML - medan input untuk Nama Depan, Nama Akhir, E-mel dan Kawasan Teks untuk mesej.

Kemudian kami menerapkan gaya CSS agar bentuknya menarik secara visual.

Bahagian HTML

Bahagian HTML mempunyai div dengan kelas containerdengan tajuk h3" Form Contact "

Borang dengan nama contact_form mengandungi medan input untuk:

  • Nama pertama
  • Nama terakhir
  • E-mel
  • Mesej

Div dengan kelas centeruntuk menyelaraskan pusat item. Satu inputjenis submitmengemukakan borang.

The requiredatribut dalam medan teks telah disemak untuk nilai pada penyerahan.

Contact Form

First Name

Last Name

Email

Message

Bahagian CSS

/* Importing the Roboto font from Google Fonts. */ @import url("//fonts.googleapis.com/css?family=Roboto:400"); /* Set font of all elements to 'Roboto' */ * { font-family: 'Roboto', sans-serif; font-weight: 400; } /* Remove outline of all elements on focus */ *:focus { outline: 0; } body { background: #263238; /* Set background color to #263238*/ } h3 { text-align: center; } /* Add styles to 'container' class */ .container { padding: 12px 24px 24px 24px; margin: 48px 12px; background: #E3F2FD; border-radius: 4px; } /* Add styles to 'label' selector */ label { font-size: 0.85em; margin-left: 12px; } /* Add styles to 'input' and 'textarea' selectors */ input[type=text],input[type=email], textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } /* Add styles to show 'focus' of selector */ input[type=text]:focus,input[type=email]:focus, textarea:focus { border: 1px solid green; } /* Add styles to the submit button */ input[type=submit] { background: #64B5F6; margin: 0 auto; outline: 0; color: white; border: 0; padding: 12px 24px; border-radius: 4px; transition: all ease-in-out 0.1s; position: relative; display: inline-block; text-align: center; } /* Add styles for 'focus' property */ input[type=submit]:focus { background: #A5D6A7; color: whitesmoke; } /* Style 'hover' property */ input[type=submit]:hover { background: #2196F3; } /* Align items to center of the 'div' with the class 'center' */ .center { text-align: center; }

Pengeluaran

FreeCodeCamp / panduan - Borang Hubungan

Maklumat lanjut:

Lawati FreeCodeCamp - Borang Hubungan di Codepen.io