[HTML] 입력 양식 및 Form 관련 태그

< 폼 관련 태그 >

- 해당 입력 양식의 틀을 의미
- form 태그 내에 작성한 'submit'버튼 클릭 시,
해당 form태그에 사용자가 입력한 값들을 서버로 넘기면서 '요청'하는 역할을 수행

[ 표현법 ]
<form action=" " method=" ">

action 속성 : 사용자가 입력한 값들을 전달하면서 요청할 서버의 '경로'를 제시
method 속성 : 요청 전송 방식을 지정하는 속성
> get 방식 : 기본값. 요청 시 사용자가 입력한 값들이 url에 노출되는 방식
> post 방식 : 요청 시 사용자가 입력한 값들이 url에 노출되지 않는 방식
> action에 지정한 서버의 경로로 method에 작성된 요청 전송 방식을 사용해서
사용자가 입력한 값들을 key=value 세트로 전달

<fieldset></fieldset> : 그룹을 묶는 태그(테두리를 만들어 줌)
<legend></legend> : 해당 그룹의 제목을 붙여주는 태그(생략 가능)

< 입력 양식 관련 태그 >

<input> : 사용자에게 값을 입력받을 수 있도록 텍스트 상자, 체크박스 등을 만들 수 있는 태그

• 문자와 관련된 input 태그의 type

type="text"	기본값. 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자
type="password"	비밀번호를 입력할 수 있는 상자. 입력값이 마스킹처리
type="search"	텍스트 상자에 입력한 검색어를 초기화 할 수 있는 x버튼이 생성되는 텍스트 상자
type="url"	url형식만 입력 가능한 텍스트 상자
type="email"	@가 들어간 이메일 형식만 입력 가능한 텍스트 상자
type="submit"	form태그의 action 속성에 적힌 서버로 입력값을 전달하며 요청을 보내는 버튼
type="reset"	현재 form태그의 양식을 모두 초기화

- 기타 속성
> name=" " : 입력값을 넘길 key 지정. 의미를 부여해서 작성하는 것이 좋음
> value=" " : 양식에 넣을 수 있는 텍스트 값
> required : 필수 입력 사항일 경우 부여
> placeholder=" " : 입력을 유도하는 꾸밈요소. 텍스트 상자에 기본으로 입력되는 문구
> maxlength="숫자" : 텍스트 상자에 작성할 수 있는 최대 길이 지정
> size="숫자" : 텍스트 상자의 사이즈 지정 가능

* querystring : 요청 시, 필요한 값을 전달하는 방식. 여러개를 받으면 &(앰퍼샌드)로 연결해서 전달
type="hidden"으로 값을 사용자에게 보이지 않게 전달하는 것도 가능

<from>
    아이디 : <input type="text" name="userId"   
                placeholder="아이디를 입력하세요" required><br> 
    비밀번호 : <input type="password" name="userPwd" required 
                maxlength="5" placeholder="영문, 숫자, 특수문자 포함 최대 5자"><br>
    검색 : <input type="search" name="query" placeholder="검색어 입력"><br> 
    홈페이지 : <input type="url" name="homepage" value="http://"><br> <!-- value값 일부 넣어줌 -->
    이메일 : <input type="email" name="email"><br>
    <input type="submit"> 
</form>

- 결과 -

<textarea></textarea> : 여러줄을 입력할 수 있는 텍스트 상자
> cols / rows="숫자" : 텍스트 상자의 사이즈 지정 가능
[CSS] > style="resize:none" : 사이즈를 변경 불가능하게하는 속성

• 숫자와 관련된 input 태그의 type

type="number"	숫자값만 작성 가능한 텍스트상자 스핀박스(위/아래 화살표 버튼)를 표시
type="range"	슬라이드바를 이용해서 숫자를 지정(단점 : 실시간 숫자가 보이지 않음)

> min / max="숫자" : 최솟값/최댓값
> step="숫자" : 한 번에 증가하거나 감소할 수 있는 값의 크기

<form action="test.do">
    수량 : <input type="number" name="amount" min="0" max="20" value="1" step="5">
    <br><br>
    점수 : <input type="range" name="score" min="0" max="100" step="25">
</form>

- 결과 -

 

• 날짜 및 시간과 관련된 input태그의 type

type="date"	연도, 월, 일을 입력받을 수 있는 텍스트 상자
type="month"	연도, 월을 입력받을 수 있는 텍스트 상자
type="week"	연도, 해당 년도의 몇 번째 주인지 입력받을 수 있는 텍스트 상자
type="time"	오전/오후, 시, 분을 입력받을 수 있는 텍스트 상자
type="datetime-local"	연도, 월, 일, 오전/오후, 시, 분을 모두 입력받을 수 있는 텍스트 상자

<form action="test.do">
    date : <input type="date" name="date"><br>
    month : <input type="month" name="month"><br>
    week : <input type="week" name="week"><br>
    time : <input type="time" name="time"><br>
    datetime-local : <input type="datetime-local" name="dt"><br>

   <button type="submit">제출</button> 
   <!-- form 태그 안에서는 기본적으로 type이 submit-->
</form>

- 결과 -

 

• 라디오 버튼 관련 input태그

type="radio"
- 제시한 여러개의 선택지들 중에서 오로지 한 개만 선택해야 할 때 사용
- 제출 시 현재 선택된(checked) 값이 넘어감
- name 속성 값이 같은 것들끼리 하나의 그룹으로 묶임(그룹으로 묶어야 중복선택되지 않음)
- 요청 시 넘길 value값을 직접 직접 지정해줘야 함
- checked 속성을 지정해놓으면 처음부터 그 값이 선택되어 있으므로,
  선택값을 무조건 넣어줄 수 있음
- id 속성으로 요소 고유의 식별자를 지정해주고, content에 <label></label>을 달면
  글자를 클릭해도 지정한 id값을 선택할 수 있음

<form>
    <input type="radio" name="lunch" id="lunchA" value="짜장면" checked><label for="lunchA">짜장면</label>
    <input type="radio" name="lunch" id="lunchB" value="짬뽕"><label for="lunchB">짬뽕</label>
    <input type="radio" name="lunch" id="lunchC" value="짬짜면"><label for="lunchC">짬짜면</label>0
</form>

- 결과 - (checked / 중복값 불가)

 

type="checkbox"

- 제시한 여러개의 선택지들 중에서 여러개를 선택가능하게 하고 싶을 때 사용

- 넘기고자 하는 값을 value속성에 명시해야 함

- 동일한 key값으로 여러개의 value값을 넘길 수 있음

<form>
    취미 : 
    <input type="checkbox" name="hobby" id="exercise" value="exercise">
    <label for="exercise">운동</label>
    <input type="checkbox" name="hobby" id="sleep" value="sleep">
    <label for="sleep">수면</label>
    <input type="checkbox" name="hobby" id="reading_book" value="reading_book">
    <label for="reading_book">독서</label>
    <!-- 운동, 수면, 독서, 영화감상, 음악감상, 자바공부 -->

    <input type="submit">
</form>

- 결과 -

 

• 추가적인 input 태그의 type 

type="color"	색상을 선택할 수 있는 input 태그의 type
type="file"	첨부하고자하는 파일을 선택할 수 있는 input태그의 type
type="hidden"	특정 값을 사용자에게 입력받지 않고, 화면에 노출시키지도 않고 넘기고자 할때 사용할 수 있는 input 태그의 type

<form action="0_test.html">

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

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

    안보임 : <input type="hidden" value="ㅎㅎㅎㅎㅎ">
    
</form>

 

 

<select></select> / <option></option>

- 사용자에게 키보드로 직접 입력받는 것이 아니라, 제시된 옵션들 중에서 선택할 수 있도록 하는 태그

- 제출 시 현재 선택된(selected) 값이 넘어감

- 각각의 option에 value 속성값을 명시했을 경우 value값이 전달됨

  (명시하지 않을 경우, 기본적으로 option태그의 content영역의 값이 넘어감)

 

<datalist></datalist> / <option></option>

- textbox +  select 기능 제공

- list에 식별자를 지정한 후, datalist 태그에 list값을 기재하여 표현

 

<form action="0_test.html">

    김치찌개 메뉴 : 
    <select name="kimchi_jjigae">
        <option value="kimchi">김치찌개</option>
        <option>꽁치김치찌개</option>
        <option>삼겹김치찌개</option>
        <option>순두부김치찌개</option>
    </select>

    <br><br><br>

    <h4>Datalist</h4>

    좋아하는 색상 : <input type="text" name="color" list="colorList">
    <datalist id="colorList"> <!-- List에 식별자 지정 후, list값 기재 -->
        <option>검정색</option>
        <option>빨간색</option>
        <option>파란색</option>
        <option>노란색</option>
    </datalist>

    <button>확인</button>
</form>