코딩묻은 디자이너

section과 option으로 드롭다운 메뉴 만들기

1. 기본

  <div>
    <label for="option">옵션을 선택해주세요</label>
    <select id="option">
      <option>옵션1</option>
      <option>옵션2</option>
      <option>옵션3</option>
      <option>옵션4</option>
      <option>옵션5</option>
    </select>
  </div>

2. name과 value

  <div>
    <label for="option">옵션을 선택해주세요</label>
    <select name="option_selction" id="option">
      <option value="옵션1">옵션1</option>
      <option value="옵션2">옵션2</option>
      <option value="옵션3">옵션3</option>
      <option value="옵션4">옵션4</option>
      <option value="옵션5">옵션5</option>
    </select>
  </div>

value : 서버에 넘어갈 데이터

3. required와 disabled

  <div>
    <label for="option">옵션을 선택해주세요</label>
    <select name="option_selction" id="option" required>
      <option value="옵션1">옵션1</option>
      <option value="옵션2">옵션2</option>
      <option value="옵션3">옵션3</option>
      <option value="옵션4">옵션4</option>
      <option value="옵션5" disabled>옵션5</option>
    </select>
    <input type="submit">
  </div>

required : 설문조사시 옵셥을 필수로 선택해야 다음 페이지로 넘어갈 수 있다

disabled : 옵션 5를 선택할 수 없다

사용자의 편의성을 조금 더 높이기 위해 label 과 autopocus를 사용할 수 있다

1. label

  <div>
    <label for="name">이름을 입력해주세요</label>
    <input type="text" id="name">
  </div>

>> label을 사용하면 input으로 정보를 받을 사각형 영역외에 label로 감싸진 영역을 클릭하며 정보 입력을 할 수 있다

input 에 id 값과 label 에 for 값을 입력하고 해당 값이 같으면 사용할 수 있다

2. autopocus

  <div>

    <label for="name_2">이름을 입력해주세요</label><br>

    <input type="text" id="name_2" autofocus>

  </div>

>> autofocus를 이용하면 해당 정보를 받는 페이지에 들어오자 마자 커서가 깜박거리며 클릭이 되어있는 것을 확인할 수 있다

모바일에서 더욱 유용!

새로고침을 하면 해당 상자에 커서가 깜박거리는걸 확인할 수 있다!

아래 코드에서 작성된 코드들은 모두 <form> 내부에 작성되었습니다

1. 텍스트 입력받기

  <div>
    <input type="text">
  </div>

2. 텍스트 가이드 넣어주기

  <div>
    <input type="text" placeholder="텍스트를 입력해주세요（*´▽`*)">
  </div>

text를 입력 받을 때 사용자에게 힌트를 제공하기 위해서는 placeholder를 사용한다

3. 데이터 전송 버튼 만들기

  <div>
    <input type="text">
    <input type="submit">
  </div>

type submit을 통해 제출 버튼을 만들 수 있다

4. '제출'버튼 텍스트 바꾸기

  <div>
    <input type="submit" value="（*´▽`*)">
  </div>

input type = 'submit'을 입력하면 기본 값이 '제출'로 들어가 있는데 value = "입력하고 싶은 값"을 입력하면 변경이 가능하다

5. 아이디 페스워드 입력받기

  <div>
    <input type="id">
    <input type="password">
    <input type="submit" value="다음">
  </div>

type="id"의 경우 ---@---.-- 로 이루어진 아이디 형태의 값만 받을 수 있다

type="password"에 값을 입력하는 경우 *****형태로  보인다