[HTML] 6. 입력 양식 및 폼 관련 태그
HTML의 입력 양식 및 폼 관련 태그에 대해 알아보자
<입력 양식 관련 태그>
input 관련 태그
사용자에게 값을 입력받을 수 있는 텍스트 상자 또는 체크박스 등을 만들 수 있음
✔️ <input type="">
아이디: <input type="text"> <br>
비밀번호: <input type="password"><br>
성별: <input type = "radio"> 남 <input type="radio">여 <br>
<button>회원가입</button>
<input type="button" value="회원가입">
<폼 관련 태그>
입력 양식의 틀을 의미
form 태그 내의 submit 버튼을 클릭 시 해당 form 내에 작성된 사용자가 입력한 값들을 서버로 넘기면서 요청하는 역할을 수행
✔️ <form action="" method="">
👉🏻 action 속성: 해당 form 내에 사용자가 입력한 값들을 전달할 서버의 경로 (어디로 보낼 건지)
👉🏻 method 속성: 요청 전송 방식을 지정하는 속성 (get / post 택1로 값을 넘김)
> get 방식: 요청 시 사용자가 입력한 값들이 url에 노출되는 방식
> post 방식: 요청 시 사용자가 입력한 값들이 url에 노출되지 않는 방식
(post 방식의 경우 주로 민감 정보를 넘길 때 사용함 => 로그인, 회원가입,...)
* form 태그 내의 제출(submit) 버튼 클릭 시
action에 지정한 서버로 method에 작성한 요청 전송 방식을 통해
"key = value" 세트로 전달함
👉🏻 key=value & key=value & ... 를 쿼리스트링이라고 부름
<fieldset> <!-- 얘는 그냥 테두리 역할이므로 form 태그가 핵심임! -->
<form action="" method=""> <!-- action 서버로, method 방식으로 -->
검색내용: <input type="text" name="keyword"> <!-- name: 키값 / 검색어 입력받은 값 = 밸류 -->
<!-- 여기 쓴 내용이 -->
<input type="submit" value="검색"> <!-- 전송됨 -->
<!-- 일반버튼은 전송(보내는) 기능이 없으므로 input type은 반드시 submit으로 해야 함! -->
</form>
</fieldset>
<hr>
fieldset: 그룹을 묶는 태그 (기본적으로 테두리로 존재)
legend: 해당 그룹의 제목을 붙이는 태그(없어도 무관)
<form action="test.do">
<fieldset>
<legend>제목1</legend>
입력 1: <input type="text" name="text1"> <br>
입력 2: <input type="text" nema="text2">
</fieldset>
<fieldset>
<legend>제목2</legend>
입력 3: <input type="text" name="text3"> <br>
입력 4: <input type="text" name="text4">
</fieldset>
<input type="submit">
<!-- 제출 버튼을 누르는 순간
url: test.do?text1=a&text2=b&test3=123&test4=000 -->
</form>
<hr>
test와 관련된 input 태그의 type
type = "text" 👉🏻 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자 (기본값)
type="password" 👉🏻 비밀번호를 입력할 수 있는 텍스트 상자, 내용물이 마스킹 돼서 보임
type="search/url/email" 👉🏻 겉모습은 일반 텍스트 상자와 유사하지만 각각의 정보에 맞게 세분화된 기능 제공
✔️ required를 걸지 않아도 search/url/email의 형식을 검사해서 바르지 않으면 넘어가지 않고 알림창 뜸
<form action="test.do">
<h3>type="text"</h3>
<p>
- 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자 (기본값)
</p>
<label>아이디: </label>
<input type="text" name="userId" placeholder="아이디를 입력하세요"
maxlength="12" required>
<!-- placeholder: 입력 유도문 / maxlenght: 최대 글자 수 / required: 반드시 입력해야 넘어갈 수 있음 -->
<br>
<h3>type="password"</h3>
<p>
- 비밀번호를 입력할 수 있는 텍스트 상자, 내용물이 마스킹 돼서 보임
</p>
<label>비밀번호: </label>
<input type="password" name="userPwd" placeholder="영문, 숫자, 특수문자 8~15자"
maxlength="15" required>
<br>
<h3>type="search/url/email"</h3>
<p>
- 겉모습은 일반 텍스트 상자와 유사하지만 각각의 정보에 맞게 세분화된 기능 제공
</p>
검색: <input type="search" name="keyword" placeholder="검색어를 입력하세요">
<br>
홈페이지: <input type="url" name="homepage" value="http://">
<!-- required 걸지 않아도 url의 주소 형식을 검사해서 바르지 않으면 넘어가지 않고 알림창 뜸 -->
<br>
이메일: <input type="email" name="email">
<br><br>
<input type="submit">
</form>
<hr>
textarea 태그
👉🏻 여러 줄을 입력할 수 있는 텍스트 상자
<form action="test.do" method="post">
<fieldset>
<legend>글 작성</legend>
글 제목: <input type="text" name="title" size="30"> <br>
글 내용: <textarea name="content" cols="32" rows="10"
style="resize:none;"></textarea>
<!-- 크기 조절이 가능하도록 오른쪽 하단에 버튼이 생기는데 이걸 없애고 싶다면 style="resize:none;"-->
<br><br>
<input type="submit" value="작성하기">
</fieldset>
</form>
<!-- textarea 태그를 이런 식으로 사용 가능하다 -->
이용약관 <br>
<textarea cols="40" rows="30" style="resize:none;" readonly>
여러분이 무심코 게재한 게시물로 인해 타인의 저작권이 침해되거나 명예훼손 등 권리 침해가 발생할 수 있습니다. 네이버는 이에 대한 문제 해결을 위해 ‘정보통신망 이용촉진 및 정보보호 등에 관한 법률’ 및 ‘저작권법’ 등을 근거로 권리침해 주장자의 요청에 따른 게시물 게시중단, 원 게시자의 이의신청에 따른 해당 게시물 게시 재개 등을 내용으로 하는 게시중단요청서비스를 운영하고 있습니다. 보다 상세한 내용 및 절차는 고객센터 내 게시중단요청서비스 소개를 참고해 주세요.
한편, 네이버 서비스를 통해 타인의 콘텐츠를 이용한다고 하여 여러분이 해당 콘텐츠에 대한 지식재산권을 보유하게 되는 것은 아닙니다. 여러분이 해당 콘텐츠를 자유롭게 이용하기 위해서는 그 이용이 저작권법 등 관련 법률에 따라 허용되는 범위 내에 있거나, 해당 콘텐츠의 지식재산권자로부터 별도의 이용 허락을 받아야 하므로 각별한 주의가 필요합니다.
네이버는 여러분이 네이버 서비스를 마음껏 이용할 수 있도록 여러분께 네이버 서비스에 수반되는 관련 소프트웨어 사용에 관한 이용 권한을 부여합니다. 이 경우 여러분의 자유로운 이용은 네이버가 제시하는 이용 조건에 부합하는 범위 내에서만 허용되고, 이러한 권한은 양도가 불가능하며, 비독점적 조건 및 법적고지가 적용된다는 점을 유의해 주세요.
</textarea>
<hr>
숫자와 관련된 input 태그와 type
type="number" 👉🏻 숫자값만 작성 가능한 텍스트 상자
👉🏻 스핀 박스가 표시됨(스핀박스: 위/아래 화살표 버튼)
<form action="test.do" method="get">
<h3>type="number"</h3>
<p>
- 숫자값만 작성 가능한 텍스트 상자<br>
- 스핀박스가 표시됨(스핀박스: 위/아래 화살표 버튼)
</p>
수량: <input type="number" name="amount" min="0" max="20" step="5" value="0">
<h3>type="range"</h3>
<p>
-슬라이드바를 통해 숫자 지정 가능
</p>
점수: <input type="range" name="score" min="0" max="100" step="20">
<br><br>
<input type="submit">
<input type="reset"> <!-- 제출 버튼과 함께 쓸 수 있는 친구,
원래 세팅값으로 돌아가는 초기화 버튼 -->
</form>
<br>
<hr>
날짜 및 시간과 관련된 input 태그의 type
date 👉🏻 연도, 월, 일을 입력받을 수 있는 텍스트 상자
month 👉🏻 연도, 월까지만 입력받을 수 있는 텍스트 상자
week 👉🏻 연도, 해당 년도에 몇 번째 주인지 입력받을 수 있는 텍스트 상자
time 👉🏻 오전/오후, 시, 분을 입력받을 수 있는 텍스트 상자
datetime-local 👉🏻 연도, 월, 일, 오전/오후, 시, 분을 입력받을 수 있는 텍스트 상자
<form action="test.do" method="get">
<h3>type="data/month/week/time/datetime-local</h3>
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>
<!--연도, 월, 일, 오전/오후, 시, 분을 입력받을 수 있는 텍스트 상자 -->
<!-- <input type="submit"> 대신 button으로도 쓸 수 있음 -->
<button type="submit">제출</button>
</form>
<br>
<hr>
라디오 버튼과 체크박스 관련 input 태그의 type
라디오 버튼(type="radio") 👉🏻 제시한 여러 개의 값들 중에서 오로지 한 개만 선택해야 할 때
(name 속성값이 똑같은 것들끼리 하나의 그룹으로 이어짐)
👉🏻 제출 버튼 클릭 시 현재 선택된(selected) 값 하나만 넘어감
체크박스(type="checkbox") 👉🏻 제시한 여러 개의 값들 중에서 여러 개 선택 가능할 때
👉🏻 현재 선택된(checked) 값들이 넘어감
👉🏻 넘기고자 하는 value 값이 넘어가고, 이때 "배열 형식"으로 넘어가게 됨
<form action="text.do" method="post">
<h3>라디오 버튼(type="radio")</h3>
<p>
- 제시한 여러 개의 값들 중에서 오로지 한 개만 선택해야 할 때 <br>
(name 속성값이 똑같은 것들끼리 하나의 그룹으로 이어짐) <br>
- 제출 버튼 클릭 시 현재 선택된(checked) 값 하나만 넘어감
</p>
성별:
<input type="radio" id="radioX" name="gender" value="X" checked> <label for="radioX">선택 안 함</label>
<input type="radio" id="radioM" name="gender" value="M"> <label for="radioM">남자</label>
<input type="radio" id="radioF" name="gender" value="F"> <label for="radioF">여자</label>
<!-- name 속성을 동일하게 지정해 놓으면 그 중 하나만 선택할 수 있게 됨
지정하지 않으면 모두 선택 가능함
제출 시 넘어가는 값은 "value"
"id 속성"에 이름을 넣고, "문구를 label로 묶어" 설정으로 "for 이름" 등록해 주면 문구 클릭 시에도 라디오박스 체크 가능 -->
<br>
<h3> 체크박스 (type="checkbox")</h3>
<p>
- 제시한 여러 개의 값들 중에서 여러 개를 선택 가능한 경우 <br>
- 현재 선택된(checked) 값들이 넘어감 <br>
- 넘기고자 하는 value 값이 넘어가고, 이때 "배열 형식"으로 넘어가게 됨
</p>
취미:
<input type="checkbox" id="baseball" name="hobby" value="baseball"> <label for="baseball">야구</label>
<input type="checkbox" id="basketball" name="hobby" value="basketball"> <label for="basketball">농구</label>
<input type="checkbox" id="soccer"name="hobby" value="soccer"> <label for="soccer">축구</label>
<br>
<input type="submit">
<br>
<hr>
추가적인 input 태그의 type
type="color" 👉🏻 색상을 선택할 수 있는 input 태그의 타입
type="file" 👉🏻 첨부하고자 하는 파일을 선택할 수 있는 input 태그의 타입
type="hidden" 👉🏻 특정값을 사용자에게 입력받지 않고 화면에 노출시키지도 않고 넘기고자 하는 값이 있을 경우 사용할 수 있는 input 태그의 타입
<form action="test.do" method="get">
<h3>type="color"</h3>
<p>
- 색상을 선택할 수 있는 input 태그의 타입 <br>
색상 선택: <input type="color">
</p>
<h3>type="file"</h3>
<p>
- 첨부하고자 하는 파일을 선택할 수 있는 input 태그의 타입 <br>
첨부파일: <input type="file" name="upFile">
</p>
<h3>type="hidden"</h3>
<p>
- 특정값을 사용자에게 입력받지 않고 화면에 노출시키지도 않고
넘기고자 하는 값이 있을 경우 사용할 수 있는 input 태그의 타입 <br>
안 보이지롱: <input type="hidden" name="key" value="엌ㅋㅋ대박">
</p>
<br><br>
버튼 생성 방법 정리
<input type="submit/reset/button"> 👉🏻 value의 기본값은 "제출/초기화/기본값없음"
<button>버튼이름</button> 👉🏻 value의 기본값은 "제출"
<h3>input type="submit/reset/button"</h3>
<input type="submit"> <!-- value="제출" 이 기본값으로 잡혀 있는 상태, value를 추가하여 덮어씌우기 가능 -->
<input type="reset"> <!-- value="초기화" 가 기본값으로 잡혀 있는 상태, value를 추가하여 덮어씌우기 가능 -->
<input type="button" value="일반버튼"> <!-- value가 기본값으로 잡혀 있지 않으므로 직접 value 속성을 넣어 줘야 함 -->
<h3>button type="submit/reset/button"</h3>
<button type="submit">제출</button>
<button type="reset">초기화</button>
<button type="button">일반버튼</button>
<br><br>
<!-- 버튼 만들 때의 주의사항 -->
<buttton>type 속성 생략 시?</buttton>
<!--
button 태그에 type 속성 생략 시 기본적으로 submit임
그래서 form 태그 내에서 button 작성 시 무조건 type 속성을 작성해야 함
-->
</form>
<br>
<hr>
select 태그와 option 태그
👉🏻 사용자에게 직접 키보드로 입력받는 게 아니라 내가 제시한 여러 옵션들 중에서 선택할 수 있게끔 해 주는 태그
👉🏻 제출 시 현재 선택된(selected) 값이 넘어감
👉🏻 select로 옵션들을 묶어 주고 option으로 여러 선택지를 제시하면 됨
👉🏻 각각의 option에 value 속성값을 명시하면 해당 value 값이 전달됨
👉🏻 만일 value 속성을 명시하지 않았을 경우 기본적으로 option 태그의 content 영역인
(시작 태그와 종료 태그 사이의 문구) 값이 넘어감
<form action="test.do" method="post">
국적:
<select name="national">
<option value="ko">한국</option>
<option value="us">미국</option>
<option value="uk">영국</option>
<option value="ru">러시아</option>
<option selected>선택 안 함</option>
<!-- selected 속성을 붙이면 해당 값이 기본값이 됨
selected 옵션이 없을 시 맨 위 항목이 자동으로 선택되어짐 -->
</select>
<br>
<h4>HTML5에서 새로 추가된 기능 datalist </h4>
<!--
datalist: 목록에 없더라도 직접 텍스트 상자에 값을 기술해서 넘길 수 있음
value 속성을 기술하면 value 속성의 값이 리스트에 들어감
-->
좋아하는 색상: <input type="text" name="color" list="colorList">
<datalist id="colorList">
<option value="black">검정색</option>
<option value="white">흰색</option>
<option value="skyblue">하늘색</option>
<option value="pink">핑크색</option>
</datalist>
<input type="submit">
</form>