폼 태그

• <form>태그 정보를 제출하기 위하여 범위를 지정하는 역할의 태그
• <form>태그 내부에서 사용되는 태그
  • <fieldset>태그 여러 컨트롤과 라벨을 묶을 때 사용하는 태그
  • <legend>태그 부모(<fieldset>태그)의 콘텐츠를 설명하는 태그
  • <label>태그 입력받는 필드를 설명할 때 사용하는 태그 <input>태그의 id속성값과 <label>태그의 for속성값이 동일하게 하여 연결 가능
  • <input>태그 데이터를 입력 받을 수 있는 태그
    • <input> 태그의 주요 속성
      • type 다양한 방법으로 데이터를 받기 위한 속성
        • text 일반적인 텍스트를 입력할 수 있는 속성값
        • password 비밀번호를 입력할 수 있는 속성값 입력한 값이 보이지 않도록 처리
        • search 검색할 때 입력하는 속성값
        • url URL주소를 입력할 수 있고 형식 체크를 해주는 속성값
        • email 이메일을 입력할 수 있고 형식 체크를 해주는 속성값
        • checkbox 여러개의 체크박스 항목을 선택 가능하게 해주는 속성값 name 속성값을 일치시키면 하나의 그룹으로써 인식
        • radio 여러개의 라디오 항목 중 1개를 선택할 수 있는 속성값 name 속성값을 일치시키면 하나의 그룹으로써 인식
        • number 숫자를 입력하기 위한 속성값
        • range 슬라이드 막대를 움직여서 값을 입력받기 위한 속성값
        • date 날짜와 시간 데이터를 입력 받을 수 있는 속성값
        • submit 폼에서 입력한 정보를 서버로 전송기 위한 속성값
        • reset <input>요소에 입력된 모든 정보를 리셋하기 위한 속성값
        • button 기능은 없고 오직 버튼 형태만 삽입하는 속성값
        • hidden 화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 함께 서버로 전송되는 속성값
      • autofocus 페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시
      • placeholder 입력란에 힌트 내용을 표시하고, 해당 필드를 선택하면 내용이 사라지는 속성
      • readonly 읽기 전용 필드 지정
      • required 필수 입력 필드로 지정
      • checked <checkbox, radio> 태그에서 해당 항목을 기본으로 선택하기 위한 속성
  • <textarea>태그 여러 줄을 입력하는 텍스트 영역을 만드는 태그
    • <textarea>태그의 속성
      • cols 가로 너비를 문자 단위로 지정
      • rows 세로 길이를 줄 단위로 지정
  • <select>, <option>태그 드롭다운 목록을 만드는 태그
    • <option>태그의 속성
      • value 해당 항목을 선택 할 때 서버로 넘겨줄 값을 지정
      • selected 선택되어 보여 질 항목을 지정
  • <button>태그 버튼을 만들어주는 태그 <input type="button">과 같은 기능을 하지만, 하위 태그를 포함할 수 있다.
    • <button>태그의 속성
      • type 버튼의 동작을 지정하는 속성
        • submit 폼을 서버로 전송
        • reset 폼에 입력한 내용을 초기화
        • button 버튼 형태만 만드는 속성값 Default로 설정 되어 있다.

<form action="">
	<fieldset>
		<legend>기본사항</legend>
		<label for="id">ID : </label>
		<input type="text" name="id" id="id" maxlength="5" placeholder="요기는 아이디">
		<br>
		<label for="pw">PW : </label>
		<input type="password" name="pw" id="pw" required>
		<br>
		<label for="txta">기타 : </label>
		<textarea name="txta" id="txta" cols="10" rows="5"></textarea>
		<br>
		<label for="poketmon">poketmon : </label>
		<select name="poketmon" id="poketmon">
			<option value="0">피카츄</option>
			<option value="1">라이츄</option>
			<option value="2">파이리</option>
		</select>
	</fieldset>
	<br>
	<label for="email">email : </label>
	<input type="email" name="email" id="email" readonly value="셋팅값">
	<br>
	<label for="number">number : </label>
	<input type="number" id="number" min="0" max="5">
	<br>
	<label for="range">range : </label>
	<input type="range" id="range" min="0" max="10">
	<br>
	<label for="date">date : </label>
	<input type="date" id="date">
	
	<br>
	<label for="banana">바나나</label>
	<input type="checkbox" id="banana" name="chk_fruit">
	<label for="sb">딸기</label>
	<input type="checkbox" id="sb" name="chk_fruit">
	<label for="wm">수박</label>
	<input type="checkbox" id="wm" name="chk_fruit">
	
	<br>
	<br>
	<label for="zz">짜장면</label>
	<input type="radio" id="zz" name="foods">
	<label for="ta">탕수육</label>
	<input type="radio" id="ta" name="foods">
	
	<br>
	<input type="submit" value="전송">
	<input type="reset">
	
	<br>
	<br>
	<button type="submit">전송</button>
	<button type="reset">초기화</button>
	<button type="button">버튼</button>
	
	<br>
	<input type="hidden" value="히든" name="hiddne">
</form>

실습

• 아래 사진처럼 만들어 봅시다.