TIL(2022. 05.10) - [HTML] form

박세진·2022년 5월 15일

form 태그는 자주 쓰이는 태그로 우리가 로그인할 때 보는 로그인창, 검색창을 이용할 때마다 보았을 것이다. form 태그에 대해서는 한 차례 정리해놓은 적이 있었다. (혼자 공부하면서 html 태그에 대해서 정리했을 때 정리했다)

form


<body>
  <form name="login-form" action="">
    <fieldset>
      <legend>회원가입정보</legend>
      <ul>
        <li>
          <label for="user-id">아이디</label>
          <input autofocus id="user-id" type="text" placeholder="아이디를 입력해주세요." minlength="5" maxlength="16" />
        </li>
        <li>
          <label for="user-pwd">비밀번호</label>
          <input required id="user-pwd" type="password" placeholder="비밀번호를 입력해주세요." minlenth="5" maxlength="16" />
        </li>
        <li>
          <label for="user-file">파일</label>
          <input id="user-file" type="file" />
        </li>
        <li>
          <label for="user-email">이메일</label>
          <input id="user-email" type="email" placeholder="이메일 주소를 입력해주세요."/>
        </li>
        <li>
          <label for="notice">공지사항</label>
          <input id="#notice" type="text" value="9시-14시" readonly />
        </li>
      </ul>
    </fieldset>
    <fieldset>
      <legend>신청과목</legend>
      <input type="radio" name="subject" id="math" value="math"><label for="math">수학</label>
      <input type="radio" name="subject" id="english" value="english"><label for="english">영어</label>
      <input type="radio" name="subject" id="kr" value="kr"><label for="kr">국어</label>
    </fieldset>
    <fieldset>
      <legend>관심분야</legend>
      <input type="checkbox" name="interest" id="movie" value="movie"><label for="movei">영화</label>
      <input type="checkbox" name="interset" id="music" value="music" checked><label for="music">음악</label>
      <input type="checkbox" name="interset" id="book" value="read a book"><label for="book">독서</label>
    </fieldset>
    <fieldset>
      <legend>선택</legend>
      <label for="sel">수량 선택</label>
      <select name="" id="sel">
        <option value="10">10개</option>
        <option value="20">20개</option>
        <option value="30">30개</option>
        <option value="40">40개</option>
        <option value="50">50개</option>
      </select>
      <select>
        <optgroup label="이과">
          <option value="math">수학</option>
          <option value="sien">과학</option>
          <option value="bio">생물</option>
        </optgroup>
        <optgroup label="문과" >
          <option value="kor">국어</option>
          <option value="eng">영어</option>
          <option value="geo">지리</option>
        </optgroup>
      </select>
    </fieldset>
    <input type="submit"value="제출하기" />
    <input type="button" value="버튼" />
    <input type="reset" value="취소하기" />
    <button>버튼</button> <!-- default 값이 submit이다. 그림이나 글자들을 마음대로 삽입할 수 있기 때문에...-->

    <textarea></textarea>
  </form>
</body>

<form method="get"> : 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다. 입력내용의 길이 제한이 있다.

이런식으로 주소 표시줄에 검색한 부분이 나타난다.

<form method="post"> : 표준 입력을 이용해서 값을 넘기기 때문에 길이 제한이 없고, 사용자가 입력한 내용이 주소 표시줄에 드러나지 않는다.

웹 접근성 측면

html에서 제일 중요한 웹 접근성 측면에서 보았을 때, <label>, <fieldset>, <legend> 태그가 중요하다.

fieldset : <form>~</form> 태그에서 여러 개로 나누고 싶을 때, fieldset 태그를 이용해서 묶어주면 된다.
legend : fieldset 태그로 묶은 그룹에 <legend> 태그를 이용해서 제목을 붙인다.
label : label의 for 속성과 input의 id 속성을 서로 연결하는 것이다. input 태그가 떨어져 있어도 id와 for를 통해 쉽게 연결할 수 있다. label 태그를 이용하면 label 부분만 클릭해도 input 부분이 선택된다는 장점이 있다.

<label for="user-id">아이디</label>
<input type="text" id="user-id" />

<label for="user-pwd"> 비밀번호
  <input type="password" id="user-pwd" />
</label>

<fieldset>
      <legend>회원가입정보</legend>
      <ul>
        <li>
          <label for="user-id">아이디</label>
          <input autofocus id="user-id" type="text" placeholder="아이디를 입력해주세요." minlength="5" maxlength="16" />
        </li>
        <li>
          <label for="user-pwd">비밀번호</label>
          <input required id="user-pwd" type="password" placeholder="비밀번호를 입력해주세요." minlenth="5" maxlength="16" />
        </li>
        <li>
          <label for="user-file">파일</label>
          <input id="user-file" type="file" />
        </li>
        <li>
          <label for="user-email">이메일</label>
          <input id="user-email" type="email" placeholder="이메일 주소를 입력해주세요."/>
        </li>
        <li>
          <label for="notice">공지사항</label>
          <input id="#notice" type="text" value="9시-14시" readonly />
        </li>
      </ul>
    </fieldset>

회원가입정보

아이디
비밀번호
파일
이메일
공지사항

input

input 태그에는 속성이 많다.

<input type="text">
<input type="search">
<input type="password">
<input type="radio">
<input type="checkbox>
<input type="submit">
<input type="button">
<input type="reset">

 input 태그에는 CSS를 이용해서 width 값을 줄 수 있다.

search와 text의 차이점

text와 search는 기능적으로 보았을 때는 비슷하지만, search 속성의 경우 사용자 에이전트에 따라 다르게 스타일링 될 수 있다.
search 같은 경우 일부 브라우저에서는 검색창 입력란 오른쪽에 x 표시가 있어 검색어를 손쉽게 지울 수 있도록 스타일 된 것도 있다.

type="button"과 button 태그의 차이

<input type="button">은 자체적으로 기능이 없고 버튼만 넣은 것이기 때문에 스크립트 함수 등을 연결해서 사용한다.

<input type="button" value="버튼" onclick="스크립트 함수">

<button></button> 태그는 submit(기본값), reset, button 속성을 사용할 수 있다.
button 태그를 이용하면 웹 접근성 측면에서 보았을 때, 버튼이 있다는 것을 정확히 전달할 수 있다는 점의 차이가 있다. 그리고 CSS를 이용해서 스타일링 할 수도 있다.

form은 정말 속성이랑 종류가 다양해서 공부할 때마다 새롭다.
그래도 이번 기회를 통해서 input type="button"과 button 태그에 대해서 이해할 수 있게 되어 좋았다. 그리고 제일 중요한 웹 접근성 측면!! 이전에 공부할 때는 label, fieldset, legend 이런 태그들은 귀찮으니까 꼭 쓰지 않아도 되면 쓰지말자 이런 생각을 많이 했었는데, 이제는 웹 접근성이 얼마나 중요한지 알게 되어서 이런 것들이 더 눈에 들어오게끔 변했다ㅎㅎㅎㅎ

박세진

경험한 것을 기록

이전 포스트

TIL(2022.05.09)-[CSS] box-sizing & 변형방법

다음 포스트