0

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

введите сюда описание изображения

1 ответ 1

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;
    }
}
3
  • вот посмотрите пример
    – Yanun
    2 ноя 2019 в 19:17
  • если все верно нажмите не птичку возле ответа ;Д
    – Yanun
    2 ноя 2019 в 19:24
  • Обращайтесь всегда вам помогут тут
    – Yanun
    2 ноя 2019 в 19:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.