[HTML] 입력 양식 태그 <form>

입력 양식 태그 <form>

• <form> 태그 : 다양한 입력 양식을 정의하는 태그
  • action 속성 : 입력 데이터를 전송할 서버의 주소
  • method 속성 : 데이터 전송 방식

 

• text 타입 : 한 줄 입력 필드

• password 타입 : 비밀번호 필드
  • size 속성 : 입력란 사이즈
  • maxlength 속성 : 최대 글자 수 

<form action="a.jsp" method="get">
	이름<input type="text" name="name" size="10" maxlength="15"><br>
	비밀번호<input type="password" name="password" size="10" maxlength="10"><br>
</form>

 

• file 타입 : 파일 업로드 필드

파일 업로드 <input type="file" name="image"><br>

 

• checkbox 타입 : 체크박스 필드(다중 선택)
  
  • name 속성 : 체크박스 요소를 그룹핑
  • checked 속성 : 기본값 설정, "checked" 생략 가능

계절 <br>
	<input type="checkbox" name="season" value="봄" checked="checked">봄
	<input type="checkbox" name="season" value="여름">여름
	<input type="checkbox" name="season" value="가을">가을
	<input type="checkbox" name="season" value="겨울" checked>겨울

 

• radio 타입 : 라디오 버튼 필드 (단일 선택)

국적 <br>
	<input type="radio" name="country" value="대한민국">대한민국
	<input type="radio" name="country" value="미국">미국
	<input type="radio" name="country" value="영국">영국

 

• <select> 태그 : 드롭다운 리스트
• <option> 태그 : 리스트 요소
  • selected 속성 : 기본값 설정, "selected" 생략 가능

학교 <br>
	<select name="school">
		<option value="초등학교" selected>초등학교</option>
		<option value="중학교">중학교</option>
		<option value="고등학교">고등학교</option>
		<option value="대학교">대학교</option>
	</select>

 

• <optgroup> 태그 : 드롭다운 리스트를 그룹핑하는 태그

직업 <br>
	<select name="job">
		<optgroup label="사무직">
			<option value="경영">경영</option>
			<option value="행정">행정</option>
			<option value="금융">금융</option>
		</optgroup>
		<optgroup label="연구직">
			<option value="사회과학">사회과학</option>
			<option value="생명과학">생명과학</option>
			<option value="정보통신">정보통신</option>
		</optgroup>
	</select>

 

• <textarea> 태그 : 글상자, 여러 줄 입력 필드
  • rows 속성 : 세로 너비 지정
  • cols 속성 : 가로 너비 지정

내용 <br>
	<textarea rows="5" cols="50" name="content"></textarea>

 

• submit 타입 : <form> 태그 안에 입력한 데이터를 식별자(키)와 함께 서버로 전송하는 버튼
  • value 속성 : 버튼에 표시될 글자 지정

<input type="submit" value="전송">

 

• reset 타입 : <form> 태그 안에 입력한 데이터를 초기화하는 버튼

<input type="reset" value="초기화">

 

• readonly 속성 : 읽기 전용, "readonly " 생략 가능

읽기 전용 <input type="text" name="level" value="일반회원" readonly="readonly">

 

• disabled 속성 : 비활성화, "disabled" 생략가능

비활성화 <input type="button" value="이전 페이지로 이동" disabled="disabled">

 

• <fieldset> 태그 : 입력 양식을 그룹핑하는 역할
• <legend> 태그 : fieldset 의 제목 지정
• <label> 태그 : 입력 양식의 제목 지정
  ⭐ <label> 태그의 for 속성과 <input> 태그의 id 속성을 통해 그룹핑 한다.
• autofocus 옵션 : 마우스 커서 자동 포커스
• required 옵션 : 입력 필수 지정

<form action="signup.jsp" method="post">
	<fieldset>
		<legend>내 정보</legend>
		<ul>
	 		<li>
	 			<label for="name">이름</label>
	 			<input type="text" name="name" id="name" autofocus required>
	 		</li>
		</ul>
	</fieldset>
</form>

 

• range 타입 : 슬라이드 막대 필드
  • min 속성 : 최소값 지정
  • max 속성 : 최대갑 지정

<li>
	<label for="priority">중요도</label>
	<input type="range" name="priority" id="priority" min="0" max="10">
</li>

 

• number 타입 : 숫자 필드

<li>
	<label for="hours">예상 시간</label>
	<input type="number" name="hours" id="hours" min="0" max="100">
</li>

 

• email 타입 : 이메일 필드

<li>
	<label for="email">이메일</label>
	<input type="email" name="email" id="email" placeholder="user@example.com">
</li>

 

• url 타입 : URL 필드

<li>
	<label for="url">URL</label>
	<input type="url" name="url" id="url">
</li>

 

• search 타입 : 검색 필드

<li>
	<label for="search">검색</label>
	<input type="search" name="search" id="search">
</li>

 

• placeholder 속성 : 힌트 기능
  • autocomplete 속성 : 자동완성 on/off 설정 (*MS Edge 미지원)

<form action="signup.jsp" method="post">
	<fieldset>
		<legend>새로운 계정 생성</legend>
		<ul>
			<li>
				<label for="name">이름</label>
				<input type="text" name="name" id="name" placeholder="이름" autocomplete="off">
			</li>
			<li>
				<label for="email">이메일</label>
				<input type="email" name="email" id="email" placeholder="user@example.com">
			</li>
			<li>
				<label for="password">비밀번호</label>
				<input type="password" name="password" id="password" placeholder="8~15글자">
			</li>
			<li>
				<input type="submit" value="전송">
			</li>
		</ul>
	</fieldset>
</form>

 

• date 타입 : 날짜 필드

<li>
	<label for="start_date">시작 날짜</label>
	<input type="date" name="start_date" id="start_date">
</li>