05_입력양식 및 폼 태그

입력양식

홈페이지의 로그인, 게시판, 검색창, 회원가입 등
사용자로부터 일정한 양식에 따라 값을 입력받는 폼
=> 사용자로부터 입력받은 값들을 컨트롤러로 넘길 예정임.

1. input 태그

사용자에게 값을 입력받을 수 있는 텍스트상자 또는 체크박스 등을 만듬
<body>
    아이디 : <input type="text"><br>
    비밀번호 : <input type="password"><br>
    성별 : <input type="radio">남<input type="radio"> 여 <br>
    <input type="submit" value="회원가입">
    <button>회원가입</button>  
</body>

type속성 - text

한줄짜리 텍스트를 입력할 수 있는 텍스트상자(기본값)
<label> 아이디 : </label>
<input type = "text" name="userId" placeholder="아이디를 입력하세요."
       maxlength="12" required> 
<!-- 
	 placeholder : 입력창에 해당 문구가 들어감
     maxlength : 텍스트의 길이를 제한함.
     required : 텍스트가 들어가지 않으면, 텍스트를 넣으라는 안내문구를 출력함.
-->

type속성 - password

비밀번호를 입력할 수 있는 텍스트상자
꼭 비밀번호가 아니더라도, 보안에 민감한 개인정보를 입력받고자 할 때 사용
<label>비밀번호 : </label>
<input type="password" name="userPwd" 
       placeholder="영문,숫자,특수문자 8~15사이로 입력하세요"
	   maxlength="15" required>

type속성 - search, url, email

겉모습은 일반 텍스트상자와 유사하지만
 각각의 정보에 맞게 세분화된 기능을 제공
검색 : <input type="search" name="keyword" placeholder="검색어를 입력하세요"> <br>
홈페이지 : <input type="url" name="homepage" value="http://"> <br>
이메일 : <input type="email" name="email"> 
<!-- 
    type="text"와 다른 점은, 각각의 속성값에 따라 제출양식이 존재하여
    제출양식을 어길 시, 수정해달라는 메세지가 뜸.
-->

type속성 - number, range

스핀박스와 슬라이드바를 통해 숫자를 지정 가능

수량 : 

수량 : <input type="number" name="amount"
min="0" max="20" step="5" value="0">
<!-- 숫자만 입력 가능 -->

점수 : 

점수 : <input type="range" name="score" min="0" max="100" step="20">

type속성 - 날짜

date : <input type="date" name="dateIn"> <br>
<!-- 연도, 월, 일을 입력받을 수 있는 텍스트상자-->
month : <input type="month" name="monthIn"><br>
<!-- 연도, 월까지만 입력받을 수 있는 텍스트상자-->
week : <input type="week" name="weekIn"><br>
<!-- 연도, 연도를 기준으로 한 주단위를 입력받을 수 있는 텍스트상자-->
time : <input type="time" name="timeIn"><br>
<!-- 오전/오후, 시, 분까지 입력받을 수 있는 텍스트상자-->
datetime-local : <input type="datetime-local" name="datetime-localIn"><br>
<!-- 연도, 월, 일, 오전/오후, 시, 분까지 입력받을 수 있는 텍스트상자-->
[백준][9934번: 완전 이진 트리]-Sliver1
1-5. 오라클 설치, 실행, 삭제

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage