form 태그는 자주 쓰이는 태그로 우리가 로그인할 때 보는 로그인창, 검색창을 이용할 때마다 보았을 것이다. form 태그에 대해서는 한 차례 정리해놓은 적이 있었다. (혼자 공부하면서 html 태그에 대해서 정리했을 때 정리했다)
<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 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 값을 줄 수 있다.
text
와 search
는 기능적으로 보았을 때는 비슷하지만, search
속성의 경우 사용자 에이전트에 따라 다르게 스타일링 될 수 있다.search
같은 경우 일부 브라우저에서는 검색창 입력란 오른쪽에 x 표시가 있어 검색어를 손쉽게 지울 수 있도록 스타일 된 것도 있다.<input type="button">
은 자체적으로 기능이 없고 버튼만 넣은 것이기 때문에 스크립트 함수 등을 연결해서 사용한다.<input type="button" value="버튼" onclick="스크립트 함수">
<button></button>
태그는 submit(기본값), reset, button
속성을 사용할 수 있다.button
태그를 이용하면 웹 접근성 측면에서 보았을 때, 버튼이 있다는 것을 정확히 전달할 수 있다는 점의 차이가 있다. 그리고 CSS를 이용해서 스타일링 할 수도 있다.form은 정말 속성이랑 종류가 다양해서 공부할 때마다 새롭다.
그래도 이번 기회를 통해서 input type="button"과 button 태그에 대해서 이해할 수 있게 되어 좋았다. 그리고 제일 중요한 웹 접근성 측면!! 이전에 공부할 때는 label, fieldset, legend 이런 태그들은 귀찮으니까 꼭 쓰지 않아도 되면 쓰지말자 이런 생각을 많이 했었는데, 이제는 웹 접근성이 얼마나 중요한지 알게 되어서 이런 것들이 더 눈에 들어오게끔 변했다ㅎㅎㅎㅎ