07. 폼 관련 태그

 

 

ㅁ < 입력란 태그 : input >

- 사용자에게 값을 입력받을 수 있는 텍스트 상자 또는 체크 박스 등을 만들 수 있다.

- 인라인 요소(자동 줄바꿈 안 됨)

 

- 형식

 

<input type="" type별속성>

 

 

ㅁ type 종류 (많은데 다 외워야 함. 다 자주 쓰임)
- 텍스트 관련 : text(기본값), password, search, url, email, tel

- 숫자 관련 : number, range

- 날짜 관련 : date, month, week, time, datetime-local

- 선택 관련 : radio, checkbox

- 버튼 관련 : button, submit, reset

- 기타 : file, color, hidden

 

 

 

ㅁ 주요 속성

- placeholder : 안내 메세지

- size : 입력란의 크기

- value : 입력란에 표현할 값 / 사용자가 입력한 값

(안내 메세지가 아님. 실제 값)
( HTML의 <input> 태그에서 value 속성은 입력 필드의 초기 값을 설정하거나, 사용자가 입력한 값을 서버로 전송할 때의 값을 지정합니다.)

- readonly : 입력란에 입력된 내용 수정 불가

- maxlength : 입력란에 입력 가능한 최대 글자 수

- required : 입력란에 필수로 값이 입력되어야됨을 의미

- disabled : 입력란을 사용안함을 의미

 

 

 

 

    <h2>텍스트 관련 input</h2>

    아이디 : <input type="text"> <br> <!-- 기본 한줄짜리 텍스트 상자 -->

    비밀번호 : <input type="password"> <br> <!-- 입력값 노출되지 않음 -->

    검색어 : <input type="search"> <br> <!-- 입력값 한번에 삭제하는 버튼 존재 -->

    <h2>레이블 적용</h2>

    <label for="userId">아이디</label> : <input type="text" id="userId"> <br>

    <label for="userPwd">비밀번호</label> : <input type="password" id="userPwd"> <br>

    <label for="searchKeyword">검색어</label> : <input type="search" id="searchKeyword"> <br> <br>

    <input type="submit">

 

 

 

 

- 레이블을 클릭하면 관련 입력 필드에 포커스가 자동으로 이동합니다.

 

- password라고 꼭 비밀번호에만 써야하는 것은 아니다.

주민등록번호처럼 노출시키고 싶지 않은 것들에 써도 됨.

 

 

 

 

 

ㅁ < 레이블 태그 : label >

- 텍스트 클릭시 입력란 요소에 포커싱이 되도록 도와주는 태그

 

- 형식

 

<label for="아이디">텍스트</label>

<input id="아이디">

 

 

- HTML에서 <input> 태그의 type 속성을 submit으로 설정하면, 해당 인풋 필드는 "제출" 버튼으로 변환됩니다.

그러나 눌러도 실제로 데이터가 전송되지는 않음.

(form 내의 input 요소들에 name 속성값이 없어서)

 

 

 

 

ㅁ < 입력값을 서버측으로 넘기는 태그 : form > 

- 하나의 요청을 처리하는 단위로 사용자가 입력한 값들을 서버측으로 보낼 때(요청) 사용되는 태그

- form 태그 내에 input과 같은 태그들로 구성해서 사용자로부터 입력값을 받는다.

- submit(제출) : form 내의 입력값들을 모두 서버측으로 전송함.

- html 문서가 view이다. controller가 자바이다.

 

 

- 형식

<form action="" method="">

    xx : <input>

    xx : <input>

    ...

    <submit타입버튼>

</form>

 

 

- 주요 속성

action : 요청할 서버의 경로

method : 요청 전송 방식 지정

    (get: 요청시 사용자가 입력한 값들이 url에 노출됨. 전달값 크기 제한 있음. 기본값.)

    (post: 요청시 사용자가 입력한 값들이 url에 노출되지 않음. 전달값 크기 제한 없음.)

 

 

- 유의 사항

form 내의 input 요소들마다 name 속성값이 부여되어있어야 한다. (그래야 전송이 됨)

 

(항상 key-value 쌍으로 데이터가 전송된다)

(다수의 value값들을 식별하기 위해서 key값이 필요하다.)

(key값이 input 요소의 name 속성값이다. value는 사용자가 입력한 값.)

 

HTML 폼에서 데이터를 전송할 때, 각 폼 필드는 key-value 쌍으로 데이터가 전송됩니다.

여기서 key는 폼 필드의 name 속성 값이고, value는 사용자가 입력한 데이터입니다.

 

 

 

ㅁ form 예제1

 

 

    <h2>form 관련 태그</h2>

    <form>

    아이디 : <input type="text" placeholder="enter your id" maxlength="12"> <br>

    비밀번호 : <input type="password" placeholder="enter your password" maxlength="15"> <br>

   

    <!-- 겉모습은 텍스트상자와 유사하나 세분화된 기능 제공 -->

    전화번호 : <input type="tel"> <br> <!-- 숫자키 입력창이 뜸(모바일에서) -->

    이메일 : <input type="email"> <br> <!-- 내부적으로 이메일 형식(@)이 맞는지 체크함 -->

    홈페이지 : <input type="url" value="http://"> <br> <br> <!-- url형식이 맞는지 체크함("http://"가 있는지) -->

 

    <input type="submit"> <br>

    <input type="submit" value="회원가입"> <!-- 기본값은 '제출' -->

    </form>

 

 

 

- 제출 눌러도 실제 데이터가 전송되지는 않음. name이 없어서.

 

 

 

ㅁ form 예제2

 

 

 

 

- 지금은 에러 뜨는게 정상. 

url 보면 ? 뒤에 사용자가 입력한 값이 그대로 노출된다.

- get방식에서 post방식으로 변경하면 사용자가 입력한 값이 노출되지 않는다.

회원가입 form같은 것은 post로 해야 한다.

- name을 붙여줘야 실제로 값이 전송된다.

 

 

 

 

ㅁ form 예제3

 

 

 

- fieldset : 그룹으로 묶어 표현하는 태그 (기본적인 테두리 존재)

- legend : filedset 내에서 쓰는 태그. 해당 그룹의 제목을 표현할 수 있는 태그.

 

 

 

 

ㅁ < 다중행 입력란 태그 : textarea >

- 여러줄 텍스트 입력을 위한 상자

- 인라인요소

- 형식

 

<textarea cols="" rows="" style="resize:none"></textarea>

 

- 주요 속성

cols : 입력 가능 열 수

rows : 입력 가능 행 수

style:"resize:none" : 사이즈 조절 불가능한 텍스트 상자로 만듦. (우하단에 사이즈 조절 버튼이 있는데 사라짐)

 

 

    <form action="/server/test/do"> <!-- method 속성 생략시 기본값 get -->

        <fieldset>

            <legend>게시글작성</legend>

                제목 : <input type="text" name="title" size="35" value="반갑습니다"> <br>

                내용 : <textarea cols="35" rows="10" placeholder="내용 입력" name="content">이곳에 작성</textarea>

                <br><br>

                <input type="submit" value="작성하기">

        </fieldset>

    </form>

 

 

- (input 요소) size 속성으로 텍스트상자 길이 지정.

- input요소는 value 속성을 이용해서 값을 미리 기재해둘 수가 있다.

textarea는 vlaue 속성이 아니라, <textarea></textarea> 시작태그와 종료태그 사이에 적어두면 된다.

 

 

 

 

 

ㅁ 숫자, 날짜 관련 input

 

 

<h2>숫자, 날짜 관련 input</h2>

<form action="/server/test.do">

   

    <fieldset>

        <legend>숫자관련</legend>

        수량 : <input type="number" name="amount" value="0" min="0" max="20" step="2"> <br>

        점수 : <input type="range" name="score" value="50" min="0" max="100" step="10"> <br>

    </fieldset>

    <fieldset>

        <legend>날짜 및 시간관련</legend>

        날짜 : <input type="date" name="dateIn" value="2024-08-05"> <br>

        월 : <input type="month" name="monthIn"> <br>

        주 : <input type="week" name="weekIn"> <br>

        시간 : <input type="time" name="timeIn"> <br>

        날짜 및 시간 : <input type="datetime-local" name="dtIn"> <br>

    </fieldset>

    <br>

    <input type="submit">

    <input type="reset">

</form>

 

 

 

- form에서 method 생략시 get이 기본값.

 

- 하나의 폼 안에 두 개의 필드셋으로 그룹을 묶을 수도 있음. 그래도 요청은 하나다. (두 그룹의 입력값이 한꺼번에 넘어감)

- submit은 form 태그 안에 있어야 한다.

- reset은 사용자가 입력한 값 초기화.

 

- number : 숫자만 입력가능한 텍스트 상자.

그리고 오른쪽에 숫자를 1씩 증가, 감소할 수 있는 스핀박스(위 아래 화살표버튼)가 생김.

- name이 있어야 데이터가 넘어감.

- min, max, step(한번에 몇 증감)은 숫자관련 타입에만 가능.

 

- range : 슬라이드바 표현

텍스트상자가 노출되지 않음.

 

 

 

- date : 년도, 월, 일

사용자가 년도, 월, 일에 입력하는 것도 가능하고, 달력 모양 누르면 달력이 나옴.

- month : 년도, 월

- week : 년도, 그 년도로부터 몇번째 주인지

 

- time : 오전/오후, 시, 분 ( %3A는 특수문자 : )

- datetime-local : 년도, 월, 일 + 오전/오후, 시, 분 ( T는 날짜와 시간 사이의 구분기호 )

 

- 자바 컨트롤러 측에서 사용자가 입력한 값을 받을 때는 무조건 문자열이다.

 

 

 

 

ㅁ 선택 관련 input

 

 

<h2>선택 관련 input</h2>

<form action="/server/test.do"> <!-- 요청처리를 하는 컨트롤러를 지정하는 경로 -->

    <fieldset>

        <legend>라디오버튼</legend>

        성별 :

        <input type="radio" id="genderX" name="gender" value="X" checked>

        <label for="genderX">선택안함</label> <!-- 문구 클릭만으로 자동으로 체크되게 하고싶다면 label 태그 활용 -->

        <input type="radio" id="genderM" name="gender" value="M">

        <label for="genderM">남자</label>

        <input type="radio" id="genderF" name="gender" value="F">

        <label for="genderF">여자</label>

        <!-- name 속성으로 한 그룹으로 묶어야 중복체크가 안 됨.-->

        <!-- url 보니 gender=X, gender=M, gender=F가 넘어감. -->

        <!-- checked 넣으면 그게 처음에 선택되어있음. -->

    </fieldset>

    <fieldset>

        <legend>체크박스</legend>

        취미 :

        <input type="checkbox" id="reading" name="hobby" value="reading">

        <label for="reading">독서</label>

        <input type="checkbox" id="sports" name="hobby" value="sports">

        <label for="sports">운동</label>

        <input type="checkbox" id="movie" name="hobby" value="movie">

        <label for="movie">영화감상</label>

        <input type="checkbox" id="music" name="hobby" value="music">

        <label for="music">음악감상</label>

    </fieldset>

    <br>

    <input type="submit">

    <input type="reset">

</form>

 

 

 

 

- 라디오 버튼

- 제시된 여러개의 값들 중 오로지 한개만을 선택할 수 있게 할 때 사용

- name 속성값이 동일한 것들끼리 하나의 그룹으로 묶임

그룹 내에 한 가지만 선택 가능.

- 제출(submit)시 checked(선택된) 되어있는 value 값이 넘어감.

 

- 체크박스

- 제시된 여러개의 값들 중 다수 선택 가능하게 할 때 사용

- 제출시 checked 되어있는 다수의 value값이 넘억마.

 

 

 

ㅁ 기타 input

 

<h2>기타 input</h2>

<form action="/server/test.do">

    색상선택 : <input type="color" name="color"> <br>

    첨부파일 : <input type="file" name="file"> <br>

    숨김정보 : <input type="hidden" name="hidden" value="ㅋㅋㅋㅋ"> <br>

    <input type="submit"> <!-- 기본값은 제출. 바꾸고 싶다면 value사용. -->

    <input type="reset"> <!-- 기본값은 초기화. 바꾸고 싶다면 value사용. -->

    <input type="button" value="일반버튼"> <!-- 아무효과 없다. 자바스크립트로 기능 부여 -->

</form>

 

 

 

 

- hidden. 화면에 노출되진 않지만 몰래 숨겨서 데이터를 넘길 때 사용.

그래서 value를 써둬야 함.

 

- 컬러로 16진수 형태의 색상 코드가 감. %23이 특수문자로 #이다. 

 

 

 

 

ㅁ 버튼 태그

 

    <button type="submit">제출</button>

    <button type="reset">초기화</button>

    <button type="button">일반버튼</button>

    <button>뭘까</button> <!-- form 안에 있는 button태그는 기본값이 submit -->

 

 

- input 안쓰고 button 태그로도 버튼을 넣을 수 있다.

단 시작태그와 종료태그가 있고, 그 사이에 텍스트를 써야한다.

type지정하면 역할부여.

 

- type을 쓰지 않는 경우가 많은데, 항상 써주는게 좋다.

type을 생략하는 순간 기본값이 submit이 된다. 

그냥 일반 버튼을 두고싶으면 type="button"해야 한다.

 

버튼 태그가 form 바깥에 있으면 상관 없음. 그냥 버튼처럼 작동함. 

form 태그 안에 두면 submit 역할을 해서 내가 의도치 않게 데이터가 전달될 수 있다.

 

 

 

 

ㅁ < 목록 상자 태그 : select, option >

- 여러 목록을 제시해서 그 중에서 선택할 수 있도록 표현

- 인라인 요소

- 형식

 

<select name="key">

    <option value="value값">목록</option>

    <option value="value값" selected>목록</option>

    <option>목록</option>

</select>

 

- 주요속성

selected : option 요소에 선택 효과를 주는 속성 (처음에 얘가 선택된 채로 보여짐)

value - option 요소에 value 속성이 없을 경우, 태그 사이의 텍스트가 value 값으로 넘어간다.

          - option 요소에 value 속성이 있을 경우, value 속성값이 value 값이다.

 

 

    <fieldset>

        <legend>일반목록상자</legend>

        국가번호 :

        <select name="countryNo">

            <option value="01">가나+01</option>

            <option>가봉+02</option>

            <option selected>한국+82</option>

            <option>일본+99</option>

        </select>

    </fieldset>

 

 

 

 

 

 

 

 

ㅁ < 콤보 상자 태그 (입력란 + 목록 상자) : datalist >

- 사용자가 직접 입력도 가능하고 목록 중에 선택도 가능하게

- 인라인 요소

 

- 형식

 

<input type="text" list="아이디"> 

<datalist id="아이디">

    <option value="">목록</option>

    <option value="">목록</option>

    <option value="">목록</option>

</datalist>

 

 

<h2>목록상자 관련 태그</h2>

<form action="/server/test.do">

    <fieldset>

        <legend>일반목록상자</legend>

        국가번호 :

        <select name="countryNo">

            <option value="01">가나+01</option>

            <option>가봉+02</option>

            <option selected>한국+82</option>

            <option>일본+99</option>

        </select>

    </fieldset>

    <fieldset>

        <legend>콤보상자</legend>

        이메일 : <input type="text" name="email" size="10"> @

        <input type="text" name="domain" list="domainlist">

        <datalist id="domainlist">

            <option>naver.com</option>

            <option>kakao.com</option>

            <option>gmail.com</option>

        </datalist>

    </fieldset>

    <br>

    <input type="submit">

</form>

 

 

 

 

- 텍스트 상자랑 datalist랑 연동을 해야 함.