HTML Form 코딩 (학습 10일차 TIL)

210622 오늘은 form 형식 코딩에 관하여 학습했다.

Today's Tips

1. input에 required(필수적으로 입력할 요소)를 써주면 입력란을 작성하라는 말풍선이 나타난다.
2. input - autofocus = 자동 커서(1개만 가능)
3. input - type="search"로 하면 입력한 문자 전체를 지워주는 버튼이 나타남
4. input에 직접 size=""속성으로 크기 변경이 가능
5. iput - type="radio"의 경우 name속성을 일치시켜 주므로 1개만 선택할 수 있게 된다.
6. type="email"로 해야 모바일 키패드에 @표시.
7. select - option - optgroup의 마크업 방법.
8. type="file"에서 multiple 속성을 넣으면 여러개의 파일 선택 가능

웹 접근성

1. input요소전에 label이 반드시 있어야 한다.
   (id를 일치 시키므로 label만 선택해도 input이 선택된다.)

  <form action="/" method="post"> <!-- action은 서버 컴퓨터 주소 -->
      <fieldset>
          <legend>로그인</legend>
          <ol>
              <li>
                  <label for="userId">아이디</label>
                  <input type="text" id="userId" required/>
              </li>
              <li>
                  <input type="submit" value="로그인" />
              </li>
          </ol>
      </fieldset>
  </form>

2. but, value, alt가 있거나, type="hidden"의 경우는 label을 적지 않는다.
3. input - type="tel"은 모바일 숫자 키패드가 나타남.
   (label을 이미 썼을 경우, title을 포함해 준다.)

  <label for="userTel"><strong>*</strong>전화번호</label>
  <input type="tel" id="userTel" /> -
  <input type="tel" title="전화번호 앞자리 입력" /> -
  <input type="tel" title="전화번호 뒷자리 입력" />