Πώς να δημιουργήσετε μια φόρμα επικοινωνίας με CSS

Πρώτα δημιουργούμε τα στοιχεία HTML - πεδία εισαγωγής για Όνομα, Επώνυμο, Email και Περιοχή κειμένου για το μήνυμα.

Αργότερα εφαρμόζουμε στυλ CSS για να κάνουμε τη φόρμα ελκυστική οπτικά.

Το τμήμα HTML

Η ενότητα HTML έχει ένα div με κλάση containerμε τον τίτλο h3" Φόρμα επικοινωνίας "

Η φόρμα με όνομα contact_form περιέχει πεδία εισαγωγής για:

  • Ονομα
  • Επίθετο
  • ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ
  • Μήνυμα

Ένα div με κλάση centerγια ευθυγράμμιση του κέντρου στοιχείων Ένας inputτύπος submitγια την υποβολή της φόρμας.

Το requiredχαρακτηριστικό στα πεδία κειμένου ελέγχεται για τιμή κατά την υποβολή.

Contact Form

First Name

Last Name

Email

Message

Το τμήμα 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; }

Παραγωγή

FreeCodeCamp / οδηγοί - Φόρμα Επικοινωνίας

Περισσότερες πληροφορίες:

Επισκεφτείτε το FreeCodeCamp - Φόρμα Επικοινωνίας στο Codepen.io