Udemy section 10 (28일) - checkbox, textarea, 드롭다운

체크박스는 크게 두가지의 용도로 사용된다

 

1. 체크박스 만들기  ( yes on no )

      <div class="form-control-inline">

        <input type="checkbox" id="agree-terms"/ name="terms">

        <label for="agree-terms">Agree to terms?</label>

      </div>

 

name 을 설정하고 버튼으로 제출하면 url에 terms=on으로 표현됨!

 

 

 

2. 체크박스 만들기 ( 2가지 이상 선택지 선택할수잇는 목록을 만들때)
     ㄴvalue 요소 추가 

 

      <div class="form-control-inline">

        <input type="checkbox" id="contact-email"/ name="contact">

        <label for="contact-email">contact me via email</label>

      </div>

      <div class="form-control-inline">

        <input type="checkbox" id="contact-phone"/ name="contact">

        <label for="contact-phone">contact me via phone</label>

      </div>

 

 

 

 

 

3. text area    시작태그와 종료태그가있다 (내용 없어도)

 

      <textarea></textarea>

 

input은 한줄만 생성하지만 text area는 여러줄!

 

 

아무 효과를 주지 않은 textarea

input,

textarea{

    width: 100%;

    display: block;

    margin-bottom: 1rem;

    box-sizing: border-box;

    font: inherit;

    border: 1px solid rgb(184, 184, 184);

    padding: 0.25rem;

    color: rgb(61, 58, 58);

input:focus,

textarea:focus {

    background-color: rgb(219, 190, 253);

    color: rgb(32, 5, 63);

    border-color: rgb(32, 5, 63);

}

     -> input에 적용된 css 스타일을 textarea에도 적용!

 

 

4. textarea에 문자작성후 제출하면 아래와같이 url형태는 브라우저가 줄바꿈과 특수문자를 url 형식으로 자동변환됨

      <label for="usermessage">Your message</label>

      <textarea id="usermessage" name="user-message"></textarea>

 

 

 

5. 드롭다운 -> 라디오버튼을 대체 할수잇음

      <label for="favorite-color">Your favorite color</label>

      <select id="favorite-color">

        <option>Blue</option>

        <option>Black</option>

        <option>Red</option>

      </select>

 

input,

textarea,

select {

    width: 100%;

    display: block;

    margin-bottom: 1rem;

    box-sizing: border-box;

    font: inherit;

    border: 1px solid rgb(184, 184, 184);

    padding: 0.25rem;

    color: rgb(61, 58, 58);

}

 

 

6. name 은 서버에 사용될 식별자를 부여함!

 

      <select id="favorite-color" name="favofite-color">

        <option>Blue</option>

        <option>Black</option>

        <option>Red</option>

      </select>

      -> select에 name 부여 (라디오 버튼처럼)

 

만약 사용자에게 부여되는 값과 머신이 읽을수있는 값이 달라야 한다면 option별로 value 부여함

 

      <select id="favorite-color" name="favofite-color">

        <option value="blue">My favorite color is blue</option>

        <option value="black">Black</option>

        <option value="red">Red</option>

      </select>

 

 

7. 의미론적 관점에서 묶어줌! -> 코드 작업이 쉬워짐! 

   section, ul, li 

      <section>

        <ul>

          <li>

            <label for="username">Your name</label>

            <input type="text" name="user-name" id="username" />

          </li>

          <li>

            <label for="useremail">Your email address</label>

            <input type="email" name="user-email" id="useremail" />

          </li>

          <li>

            <label for="userpassword">Password</label>

            <input type="password" name="user-password" id="userpassword" />

          </li>

        </ul>

      </section>

 

 

8. h1, text-align으로 center ! 중앙정렬!

 

 

9. button 양식 버튼에 대한 추가 정보 

 

   1) 

      <button>Submit</button>

  

      <button type="submit">Submit</button>

       ㄴ form 양식 안에 있으면 submit가 디폴트값!

 

      <button type="button">Submit</button>

       ㄴ 양식을 제출 하지 않음!

 

      <button type="reset">Submit</button>

       ㄴ 칸에 작성한 내용을 삭제함!

 

 

10. 속성검증하기

 

만약에 인풋 이메일 양식에 이메일을 입력하지 않았을 경우!

 

    form에 novalidate  이메일 같은 양식은 속성검증을하는 nobalidate라는 불리언값을 작성해주면 속성검증을 안함!

 

 

            <label for="username">Your name</label>

            <input type="text" name="user-name" id="username" required />

 

      필수 입력값으로 설정! required!!! 

 

 

      <input type="text" name="user-name" id="username" required minlength="7"/>

        ㄴ 최소 문자 설정 (minlength는 숫자를 조절!)

 

 

      <input type="number" step="5" name="user-age" id="user-age" required min="18" max="100"/>

        ㄴ 나이 min, max로 설정 

 

      <input type="date" name="birthday" id="birthday" required min="1921-01-01" max="2003-01-01"/>
       ㄴ 날짜선택에서 그만큼 제한됨!

      <input

          type="radio"

          name="verify"

          id="verify-text-message"

          value="text-message"

          required

        />  

        -----> 라디오버튼 required !!

 

11. placeholder 기능

  <input type="text" name="user-name" id="username" required minlength="7" placeholder="kim seungyeon"/>

       ㄴ value 는 사용자가 입력한 값으로 취급되지만 placeholder는 아니다!

 

12. textarea 추가 기능

      <textarea id="usermessage" name="user-message" required rows="8"></textarea>

       ㄴ 8로 설정하면 textarea 줄이 커짐! (디폴트가 8이 됨!)

 

 

 

textarea {

    resize: none;

}

textarea {

    resize: vertical;

}   -> 위아래로만 움직

====> MDN에서 추가 양식들에 대해서 체크해보기!