본문 바로가기

개발일지/Front

form 복습 - 다양한 효과들 적용해보기

 

02.form 태그연습

폼 연습 인적사항 이 름 아 이 디 비밀 번호 주민 번호 - 성 별 여자 남자 기타 사용 언어 한글 영어 독어 일어 국 적 한국 미국 중국 태국 취 미 요가 영화 러닝 테니스 이 태그들을 불

practice365.xyz

form 태그의 기본 구성은 위쪽 게시글을 참고

 

 

다양한 효과들을 한 번에 적용한 탓에 미적 감각이라는 게 0에 수렴하지만.. form 태그의 옵션들을 한 눈에 볼 수 있습니다. 

 

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
	fieldset{ width:400px; height:430px; background:skyblue; }
	legend{ text-align:center; background:white; }
	#d1{ float:right; padding: 10px 10px 0px 0px; }
  </style>
 </head>
 <body>
	<form action="jsp.jsp" method="post"> 
		<!-- 아직 안 배웠지만  -->
	  <fieldset>
		<legend>인적사항</legend>
		아 이 디 &nbsp;<input type="text" size="10" maxlength="10" autofocus required ><br> <!-- 다음으로 못 내려가도록 -->
		이 &nbsp; &nbsp; 름 &nbsp;<input type="text" size="10"><br>
		생 &nbsp; &nbsp; 일 &nbsp;<input type="date"><br>
		색 &nbsp; &nbsp; 상 &nbsp;<input type="color"><br>
		주민번호 <input type="text" size="5" maxlength="6"> - 
			  <input type="password" size="5" maxlength="7"><br>
		비밀번호 <input type="password" size="10" maxlength="12" placeholder="영어, 숫자, 특수문자"><br>
		성 &nbsp; &nbsp; 별 &nbsp;<label>여자<input type="radio" name="s1"></label>
			<label>남자<input type="radio" name="s1"></label>
			<label>기타<input type="radio" name="s1"></label><br>
		취 &nbsp; &nbsp; 미 &nbsp;<label>여행 <input type="checkbox" name="c1"></label>
				<label>영화감상 <input type="checkbox" name="c1"></label>
				<label>요가 <input type="checkbox" name="c1"></label>
				<label>자수 <input type="checkbox" name="c1"></label><br>
		국 &nbsp; &nbsp; 적 &nbsp;<select>
					<option>한국</option>
					<option>일본</option>
					<option>중국</option>
				</select><br>
		관심분야 <select multiple="multiple">
					<option>철학</option>
					<option>과학</option>
					<option>디자인</option>
					<option>프로그래밍</option>
				</select><br>
		찾 &nbsp; &nbsp; 기 &nbsp;<input type="search"><br>
		메일주소 <input type="url"><br>
		범 &nbsp; &nbsp; 위 <input type="range" min="3" max="9"><br>
		값을 입력하세요 <input type="number" min="3" max="8"><br>
		<div id="d1">
			<Button type="submit">등록</button>
			<input type="reset" value="취소">
		</div>
	  </fieldset>
	</form>
 </body>
</html>

 

서비스 차원으로 넣는 옵션들이다.

 

아 이 디 &nbsp;<input type="text" size="10" maxlength="10" autofocus required ><br>

autofocus 오토포커스 자동으로 커서 넣기. 첫 화면에 들어가자마자 자동으로 커서가 넣어진다.

required 리콰이어드 필수 라는 뜻으로 입력하지 않으면 다음으로 넘어가지 않는다는 뜻 경고수준만 하는 정도로 절대로 안 넘어 가는 것은 아님.

 

생 &nbsp; &nbsp; 일 &nbsp;<input type="date"><br>
색 &nbsp; &nbsp; 상 &nbsp;<input type="color"><br>

date 날짜를 입력할 수 있음

color 색상을 입력할 수 있음 

 

비밀번호 <input type="password" size="10" maxlength="12" placeholder="영어, 숫자, 특수문자"><br>

placehoolder 인풋 창에 연한 글씨가 써진다. 사용자가 누르면 자동으로 없어짐.

 

찾 &nbsp; &nbsp; 기 &nbsp;<input type="search"><br>
메일주소 <input type="url"><br>

search 찾기 말 그대로 찾아서 입력하는 용도인데 html, css만 가지고선 연동을 할 수 없음
url 메일주소 및 개인의 도메인주소 등을 입력하는 용도

범 &nbsp; &nbsp; 위 <input type="range" min="3" max="9"><br>
값을 입력하세요 <input type="number" min="3" max="8"><br>

range 레인지 범위 라는 뜻으로 말그대로 범위를 입력 할 수 있다. min과 max로 최소값 최대값 설정 가능하고 바(bar) 형태로 되어 있음

number 비슷한 옵션이지만 숫자 형태로 입력할 수 있다.

 

<div id="d1">
	<Button type="submit">등록</button>
	<input type="reset" value="취소">
</div>

<input type="submit" value="전송" 이 방법도 있지만 

<button type="submit">전송</button> 이 방법도 있음

reset 취소 버튼 글자는 value 안에 입력

 

내가 div 안에 넣은 이유는 범위 설정을 한 뒤 오른쪽 정렬을 하고 싶어서...