[HTML] form input

💾 Editor: VSCode

---

• <input type="text" value="미리 채워진 값">
• <input type="text" placeholder="배경 글자">
• <input type="text" name="인풋 이름">

 

<select>

        <select>
            <option>고구마</option>
            <option>감자</option>
            <option>사과</option>
        </select>

 

• <textarea> : 큰 input

---

👉 input에 style 주기

 

html

    <form>
        <input type="text" class="text-input">
        <input type="email" class="text-input">
        <input type="submit" value="전송">
    </form>

 

css

input[type="text"] {
    padding: 10px;
    font-size: 20px;
    border: 2px solid black;
    border-radius: 5px;
}

왼 type=text / 오 type=email

input 태그로 하면 모든 input 태그에 스타일이 적용됨.

원하는 타입의 input 태그만 지정하여 스타일을 줄 수 있음

---

👉 실습

 

parctice.html

    <div class="container">
        <div class="contact-box">
            <h1>contact us</h1>

            <form class="contact-form">
                <h4>Your Email</h4> <input type="email" placeholder="email@naver.com">
                <div class="contact-name">
                    <div class="name-first">
                        <h4>First name</h4> <input type="text">
                    </div>
                    <div class="name-last">
                        <h4>Last name</h4> <input type="text">
                    </div>
                </div>
                <h4>Message</h4>
                <textarea rows="10px" cols="45px"></textarea>
                <div class="contact-bottom">
                    <input type="checkbox"> Subscribe
                    <input type="submit" value="SEND">
                </div>
            </form>
        </div>
    </div>

 

practice.css

body {
    margin: 0px;
}

div {
    box-sizing: border-box;
}

.container {
    max-width: 400px;
    height: auto;
    ;
    background-color: #eee;
    margin-left: auto;
    margin-right: auto;
}

.contact-box {
    padding: 20px 30px; /* 상하 좌우 */
    margin-top: 10px;
}

.contact-box>h1 {
    margin: 0px;
}

h4 {
    margin: 5px 0px;
    display: inline-block
}

input[type="text"] {
    border: 1px solid #ccc;
    border-radius: 3px;
    height: 30px;
    width: 90%;
}

input[type="email"] {
    border: 1px solid #ccc;
    border-radius: 3px;
    height: 30px;
    display: block;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

textarea {
    border: 1px solid #ccc;
    border-radius: 3px;
    resize: none;
    width: auto;
    margin-bottom: 10px;
}

.contact-bottom>input[type="submit"] {
    float: right;
    background-color: green;
    width: 100px;
    height: 30px;
    border: none;
    border-radius: 3px;
    color: white;
    font-weight: bold;
    padding: 0px;
}

.contact-name {
    margin: 5px 0px;
    height: 100%;
}

.name-first {
    width: 50%;
    float: left;
}

.name-last {
    width: 50%;
    float: left;
}

.name-last > input {
    float: right;
}

.name-last > h4 {
    margin-left: 12px;
}

흡사하게 만들었다.

css가 너무 지저분한...

이게 최선이었을까..?

 

위에는 내가 만든 거고, 아래는 강의 보면서 따라해본 거다.

 

practice1.html

    <div class="form-background">
        <div class="form-white">
            <form>
                <div class="w-100">
                    <h3>contact us</h3>
                    <div>
                        <p>Your Email</p>
                        <input class="form-input" placeholder="email@naver.com" type="email">
                    </div>
                </div>

                <div class="w-50">
                    <p>First name</p>
                    <input class="form-input" type="text">
                </div>

                <div class="w-50">
                    <p>Last name</p>
                    <input class="form-input" type="text">
                </div>
                <div style="clear: both"></div>

                <div class="w-100">
                    <p>Message</p>
                    <textarea class="form-input"></textarea>
                </div>

                <div>
                    <input id="sub" type="checkbox">
                    <label for="sub">Subscribe</label> <!-- for 속성을 넣고, input의 id와 동일하게 설정하면 체크박스를 누른 것과 동일하게 만들어 줌 -->
                    <button class="yellow-button">SEND</button>
                </div>
            </form>
        </div>
    </div>

 

practice1.css

 body {
    margin: 0px;
 }

div, input, textarea {
    box-sizing: border-box;
}

.form-background {
    background-color: black;
    padding: 30px;
}

.form-white {
    background-color: white;
    padding: 30px;
    width: 80%;
    max-width: 600px;
    margin: auto;
}

.form-input {
    width: 100%;
    padding: 10px;
    font-size: 20px;
    border: 1px solid black;
    border-radius: 5px;
}

.w-50 {
    width: 50%;
    float: left;
    padding: 10px;
}

.w-100 {
    width: 100%;
    padding: 10px;
}

.yellow-button {
    padding: 10px;
    background-color: gold;
    border: none;
    border-radius: 5px;
    color: white;
    float: right;
}

💡 알림

• 셀럭터에 콤마를 사용하면 여러 개 동시 선택 가능함
• 재사용 가능하게 class 만드는 게 좋음
• <input> 만들 때 <label for=""> 함께 사용ㅎ면 유용함

 

❌ 되돌아보기

스스로 만들어보고, 그 다음에 강의를 보면서 똑같은 코드를 따라해보며 느낀 점은 항상 '재사용'의 가능성에 대해서 생각을 하며 작성을 해야겠다는 거다.

css만 해도 내가 작성한 게 거의 2배로 많은데?

분명히 재사용을 할 수 있음에도 불구하고, class를 또 만들고 또 만들고 또 만들었다.

그러다 보니, 너무 길어져 버렸다.

줄일 수 있는 부분이 무엇인지, 재사용할 수 있는 것은 무엇인지에 대해 항상 생각해보기.

 

 

 

코딩애플 공부 기록