Како да направите једноставан образац за контакт користећи ХТМЛ, ЦСС и ЈаваСцрипт

Обрасци за контакт су кључна компонента веб локација, омогућавајући корисницима да вам се обрате са упитима, повратним информацијама или захтевима.

Овде ћете научити процес креирања основног обрасца за контакт за вашу веб локацију. Од постављања пројекта до додавања валидације и стилизовања обрасца, осигуравајући да до краја имате функционалан и угодан контакт образац.

Постављање пројекта

Пре него што почнете да кодирате, уверите се да је ваше развојно окружење подешено. Отворите жељени уређивач текста или једно од препоручених интегрисаних развојних окружења (ИДЕ) као Висуал Студио Цоде или Сублиме Тект.

Направите фасциклу пројекта да бисте организовали своје ХТМЛ и ЦСС датотеке.

У оквиру ове фасцикле, направите засебне датотеке за ХТМЛ (индек.хтмл) и ЦСС (стиле.цсс). На крају, повежите своју ЦСС датотеку у свој ХТМЛ документ одељак користећи таг.

Креирање ХТМЛ структуре

Основа сваког контакт форме је његова ХТМЛ структура. Ево како можете да креирате потребне ХТМЛ елементе за свој контакт образац.

<main>
<h1>Welcome to my Formh1>
<formid="form">
<divclass="input__container">
<labelfor="name">Namelabel>

<inputtype="text"id="name"name="name"required />
div>
<divclass="input__container">
<labelfor="email">Emaillabel>
<inputtype="email"id="email"name="email"required />
div>
<divclass="input__container">
<labelfor="message">Messagelabel>
<textareaid="message"name="message"rows="4"required>textarea>
div>
<button>Submitbutton>
form>
main>

ХТМЛ код изнад креира елемент обрасца и угнезди више поља за унос како би примио корисничке уносе за образац за контакт.

Тренутно ваш контакт образац изгледа овако:

Атрактиван и једноставан контакт образац побољшава целокупно корисничко искуство. ЦСС код у наставку користи својства флекбок-а и ЦСС бок модела као што су паддинг и маргина за стилизовање обрасца за контакт ради бољег изгледа.

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
html {
 font-size: 62.5%;
}
body {
 font-family: "Mulish", sans-serif;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}
main {
 width: 40rem;
 box-shadow: 2px 3px 5pxrgba(0, 0, 0, 0.2);
 margin: 0 auto;
 height: 45rem;
 border-radius: 2rem;
 padding: 2rem;
}
h1 {
 text-align: center;
 font-size: 3rem;
 padding: 1rem 2rem;
}
form {
 margin: 3rem 0;
 display: flex;
 flex-direction: column;
 row-gap: 2rem;
}
.input__container {
 display: flex;
 flex-direction: column;
 row-gap: 0.5rem;
}
.input__containerlabel { font-size: 1.6rem; }
.input__containerinput,
textarea {
 padding: 1rem 2rem;
 border-radius: 5px;
 border: 1pxsolid#555;
 resize: none;
}
button {
 align-self: flex-start;
 padding: 1rem 2rem;
 border-radius: 5px;
 border: none;
 background: #333;
 color: #fff;
 cursor: pointer;
}

Ваш контакт образац сада изгледа овако:

Имплементација валидације обрасца

Осигурање тачности и потпуности информација које је дао корисник је најважније. Један ефикасан приступ укључује користећи ЈаваСцрипт за валидацију обрасца на страни клијента. Да бисте започели, направите ознаку скрипте на крају ХТМЛ датотеке и циљајте елемент обрасца.