<input> 의 type속성
- name : 전체 폼 데이터에서 해당 필드가 어떤 데이터를 갖고 있는지 구별하는 역할
- placeholder : 양식 컨트롤이 비어있는 때 양식 컨트롤에 나타나는 내용. 입력값에 대한 힌트 제시
-
autocomplete : 양식 자동 생성
-
required : 필수 입력 항목
-
disabled :유저가 값 입력 못함, 폼데이터에 포함되어 전송되지도 못함.
-
readonly : 값 수정을 하지 못하나 폼데이터에 데이터 전송은 가능.(보기 전용)
-
min : 입력 값의 최솟값
-
max : 입력 값의 최댓값
-
step : 숫자 증가, 감소의 폭 지정. 이 때 최솟값을 기준으로 간격을 정함.
( ex) min="-10" max="10" step="3" 으로 할 시, 최솟값 -10을 기준으로 -7, -4, -1, 2,...로 지정. 처음부터 값을 올리는 버튼을 누르면 2부터 시작. )
(참고)https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input)
<button> : 버튼 생성
- <input type="button">과 <button>의 차이
- input은 빈 요소. button은 닫힌 태그 존재.
- input의 value 속성 : 문자열만 입력 가능.
- input은 type속성으로 내재된 기능으로 버튼 이름이 자동생성, 기능도 type에 맞춰 자동생성되지만, button의 경우 JavaScript없인 아무 기능도 없음.
- button의 경우 태그안의 내용을 버튼 이름으로 사용 가능. 문자 수식, 이미지 첨부도 가능.
- 아이콘 버튼 접근성 고려사항
- 아이콘만 넣으면 접근성이 좋지 않음(스크린리더 사용 시)
- 이를 설명해줄 부가적인 내용도 적을 것.
<button type="button"> <img src="A.png" width="100px> <em>Add to favorites</em> </button>
<select> : 옵션 메뉴 제공. name 속성 값 지정할 것. (주소창에 입력되는 내용이 있어야 하므로)
<option> : <select>의 자식 태그. 옵션 리스트에 들어갈 값을 정한다.
내용에는 화면에 띄울 텍스트를, value 속성에는 주소창에 넣을 값을 정한다.
첫 번째 값이 select의 기본값으로 나옴.
<optgroup> : <option> 항목들을 구분할 때 사용. 그룹 이름을 표시할 때 label 속성을 이용.
<form action="" method="GET">
<label for="movie">좋아하는 영화: </label>
<select id="movie" name="movie" required>
<!-- 후보군 -->
<option value="">--선택해주세요--</option> <!--선택 불가-->
<optgroup label="Animation">
<option value="up">업</option>
<option value="zootopia">주토피아</option>
<option value="pixel">픽셀</option>
</optgroup>
<optgroup label="SF">
<option value="iron man">아이언맨</option>
<option value="dr.strange">닥터 스트레인지</option>
</optgroup>
</select>
<input type="submit">
</form>
<!-- 주소에는 로마자가 들어가므로 value 속성 값을 로마자로 작성 -->좋아하는 영화: --선택해주세요-- 업 주토피아 픽셀 아이언맨 닥터 스트레인지
<datalist> : 추천 검색어 목록 표시.
select태그와 달리 텍스트 값을 사용자가 원하는 대로 수정하여 입력 가능.
input의 list 속성과 같이 사용.
<form action="" method="GET">
<label for="movie">좋아하는 영화: </label>
<input type="text" id="movie" name="movie" list="movie-list">
<datalist id="movie-list">
<option>주토피아</option>
<option>인사이드아웃</option>
<option>토이스토리1</option>
<option>토이스토리2</option>
<option>토이스토리3</option>
</datalist>
<input type="submit">
</form>좋아하는 영화: 주토피아 인사이드아웃 토이스토리1 토이스토리2 토이스토리3
<textarea> : 텍스트 입력창 표시. 여러줄 입력이 가능하며 창크기 조절 가능.
</form>
<form action="" method="GET">
<label for="comment">댓글 :</label>
<textarea name="comment" id="comment" rows="5" cols="5">
안녕하세요.
</textarea>
<input type="submit">
</form>댓글 :
