HTML5 웹 폼 - input, select, textarea

폼 양식 활용

폼 양식

웹 페이지에서 사용자가 입력을 받는 다양한 형태의 폼 양식
로그인, 등록, 검색, 예약, 쇼핑 등
데이터를 넣을 수 있는 입력 필드를 가진 웹 페이지

폼 요소

폼을 만드는 다양한 태그
: input, textarea, select

폼 태그

클라이언트가 웹 브라우저에서 데이터를 입력하고 웹 서버에 전달하기 위해 사용하는 태그
input. textarea. select 등의 폼 요소를 이용

• 형식

<form name=“폼의 이름 지정” action=“웹 서버 응용 프로그램의 url” method=“get | post” >
여러 개의 폼 요소 작성 …
</form>

• 속성

1. name : 폼의 이름 지정

2. action - 폼 데이터를 처리할 웹 서버 응용 프로그램의 이름 URL. 주소.
   submit 속성의 버튼이 눌리면 브라우저는 action에 지정된 웹 서버 응용프로그램 실행 요청
   웹 서버 응용프로그램은 Java, JSP, PHP 등의 언어로 작성
   action은 문법상 생략 가능하나 실행하려면 들어가야 한다

3. method - 폼 데이터를 웹 서버로 전송하는 형식
   - GET : URL에 데이터를 붙여서 전송, 보안에 취약 >> 검색
   - POST : 내부에 숨겨서 보내서 외부에서 볼 수 없음
   
   

form 태그의 action과 a의 href 차이점

form

<form action="search.html" method="get">
<input type="text" name="query">
<input type="submit" value="검색">
</form>

http://localhost:8080/search.html?query=입력한검색어

페이지를 요청 + 데이터 전송 ( Ajax 사용 시 페이지 이동 없이 데이터 처리 가능 )

href

<a href="search.html">이동</a>

http://localhost:8080/search.html

페이지만 요청

1. input 태그

텍스트 입력 창 만든다
클라이언트가 웹 서버에 웹 페이지를 요청하면서 사용자가 입력한 데이터를 같이 보냄

• 형식

<input type="속성?" name=“폼 요소 이름” maxlength=“문자 개수”
size=“문자 개수” value=“초기 텍스트”>

• 속성

1. type - 입력 요소의 종류 결정
   
   종류
   - text : 한 줄 짜리 입력 창
   - password : 암호 입력 창. 사용자 입력 문자를 '*'와 같은 다른 문자로 출력

2. name - 폼 요소 이름, name 속성은 서버로 전달되는 이름
   서버에서는 name 속성을 변수 이름처럼 생각해서 값을 참조
   임의로 작성 가능

3. maxlength - 폼 요소에 입력할 수 있는 문자의 최대 개수

4. size - 입력 창의 크기, 단위는 문자 개수, 안 넣으면 브라우저별로 다를 수 있음(20)

5. value - 폼 요소의 입력 창에 표시되는 초기 텍스트
   
   

1-2. input - 선택형 입력 태그

1) 라디오 버튼

<input type= “radio” >
여러 항목 중 하나를 선택
name 속성 값이 같은 라디오버튼들이 하나의 그룹 형성한다

2) 체크박스

<input type= "checkbox“ >

• 형식

<input type=“checkbox 또는 radio” name=“폼 요소 이름” value=“초기 텍스트” checked >

• 속성
  type – checkbox | radio
  name - 폼 요소 이름
  value - 폼 요소가 선택된 상태일 때, 웹 서버에 전송되는 값
  checked - 이 속성이 있으면, 초기에 선택된 상태로 출력
  
  

2. 콤보박스 <select>

• 여러 개의 항목이 나타나는 콤보 박스를 만들 때 사용
• <select> 태그 안에서 <option> 태그로 선택할 값들을 지정
• <option> 태그 안에 ‘selected’를 선언하면 해당 항목을 기본값으로 지정
  
  

▼ select 태그와 option 태그 속성

  Home > Language <hr>
  <form action="form_select2.html" method="get">
    <fieldset style="width:150px">
      <legend>언어 선택</legend>
      <p>
        <select name="language">
          <option value="choice">=== 선택 ===</option>
          <option value="korean">한국어</option>
          <option value="english">영어</option>
          <option value="chinese">중국어</option>
          <option value="japanese">일본어</option>
          <option value="spanish">스페인어</option>
        </select>
      </p>
      <br><br>
      <input type="submit" value="제출">
      <input type="reset" value="초기화">
    </fieldset>
  </form>
</body>

폼 요소 그룹화

<select name="...">
<option value="choice"> === 선택 === </option>
	<optgroup label="본인 국적">
		<option value="korean"> 대한민국 </option>
		<option value="USA"> 미국 </option>
		<option value="France"> 프랑스 </option>
	</optgroup>
</select>

3. textarea 태그

<textarea cols="너비값" cols="높이값"></textarea>

▼ 속성

<fieldset style="width:200px">
<legend> 자유게시판 </legend><p>
<textarea name="introduction" cols="30" rows="3"></textarea>
<div align="center">
<input type="submit" value=" 전송 "> &nbsp;
<input type="reset" value=" 취소 ">
</div>
</fieldset>
</form>