소스 코드

HTML 코드:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
</head>
<body>
    <div class="container">
        <form action="" autocomplete="off">
            <h1>Contact Us</h1>
            <div class="inp">
                <div class="name">
                    <input type="text" name="name" id="name" placeholder="Name" required>
                </div>
                <div class="email">
                    <input type="email" name="email" id="email" placeholder="E-mail" required>
                </div>
                <div class="phone">
                    <input type="number" name="phone" id="phone" placeholder="Phone No." required>
                </div>
                <div class="message">
                    <textarea name="message" id="message" cols="30" rows="10" placeholder="Type Here Your Message..." required></textarea>
                </div>
                <div class="submit">
                    <button type="Submit">Submit</button>
                </div>
            </div>
        </form>
    </div>

</body>
</html>

CSS 코드:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}
body{
    height: 100vh;
    width: 100%;
    background: turquoise;
    display: grid;
    place-items: center;
}
.container{
    position: relative;
    height: 450px;
    width: 350px;
    background: rgb(0, 0, 0);
    border-radius: 3px;
    box-shadow: 1px 1px 4px #444, -1px -1px 4px #444;
}
form h1{
    color: white;
    text-align: center;
    margin: 5px;
}
.inp{
    margin: 10px 25px;
}
input{
    color: white;
    height: 40px;
    width: 280px;
    outline: none;
    border: 1px solid white;
    margin: 10px 0;
    box-shadow: 1px 1px 1px rgb(224, 221, 221);
    padding: 15px;
    font-size: 20px;
    background: #000;
}
textarea{
    height: 140px;
    width: 280px;
    color: white;
    outline: none;
    border: 1px solid white;
    background: #000;
    margin: 10px 0;
    box-shadow: 1px 1px 1px rgb(224, 221, 221);
    padding: 10px 10px;
    font-size: 20px;
}
.submit button{
    height: 40px;
    width: 100px;
    background: #0489EE;
    color: white;
    font-size: 20px;
    font-weight: 650;
    cursor: pointer;
    border: none;
    outline: none;
    box-shadow: 0 1px 2px #777;

}
::placeholder{
    color: white;
}

나를 찾아라:

Facebook

Github

Reference

이 문제에 관하여(순수 HTML 및 CSS를 사용한 반응형 문의 양식.|), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/technicalvandar885/responsive-contact-form-using-pure-html-css-2ip1

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다