Как сделать такую html форму без бутсnрапа?

164

20 октября 2021, 01:30

Как сделать такую html форму без бутсnрапа ?

Answer 1

хотя это можно реализовать многими способами

<!DOCTYPE html>
      <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <form action="#">
        <h3>Have a question</h3>
        <div id="t">
            <div id="left">
                <input type="text" class="n" placeholder="Your Name:">
                <input type="text" class="n" placeholder="Telephone">
                <input type="text" class="n" placeholder="Email">
            </div>
            <input type="text" placeholder="Message" id="right"> 
        </div>
        <input type="button" value="Send" id="button">
    </form>
</body>
</html>

а вот css

body {
    margin: 0;
    padding: 0;
}
#left {
    display: flex;
    flex-direction: column;
    float: left;
}
#left > input {
    width: 200px;
    height: 35px;
    margin-bottom: 17px;
}
#right {
    width: 200px;
    height: 151px;
    margin-left: 20px;
}
#button {
    margin-top: 15px;
}
#t::after {
    display: inline-block;
}
form {
    margin-left: 150px;
}

вот другой способ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <form action="#">
        <h3>Have a question</h3>
            <div id="left">
                <input type="text" class="n" placeholder="Your Name:">
                <input type="text" class="n" placeholder="Telephone">
                <input type="text" class="n" placeholder="Email">
            </div>
            <div id="right">
                <input type="text" placeholder="Message" id="textarea"> 
                <input type="button" value="Send" id="button">
            </div>
    </form>
</body>
</html>

css

body {
    margin: 0;
    padding: 0;
}
#left {
    display: flex;
    flex-direction: column;
    float: left;
}
#left > input {
    width: 200px;
    height: 35px;
    margin-bottom: 17px;
}
#right {
    float: left;
    margin-left: 20px;
}
#textarea 
{
    width: 200px;
    height: 151px;
    display: block;
}
#button {
    margin-top: 15px;
    width: 208px;
    height: 40px;
}

form {
    margin-left: 15px;
}
@media screen and (max-width: 450px)
{
    #right {
        margin-left: 0px;
    }
}