HTML 2st - form

  • 웹페이지가 상호작용할 수 있게 도와주는 요소로 서버 안의 프로그램에 데이터를 송신하기 위한 장치
  • 하나의 폼 안에 송신버튼이 복수 출현 할 수 없다.

Form

  • action="URL" (필수 속성) : 필드의 내용을 처리하는 프로그램의 URI
  • method="HTTP메소드" (필수 속성) : post(폼의 본문으로 송신) 와 get(액션속성에 지정한 URI에 폼의 내용을 '?'구분으로 추가하여 송신)두가지 방식이 있다.
  • form서식 요소안에 반드시 submit(<input type="submit">이나 <input type="image">, <button type="submit"> 중 한가지 방법)을 정의한다.
  • 폼 요소는 블록레벨요소와 script요소만 직접적인 자식 요소로 할수 있다. 인풋요소는 블록요소 안에 쓴다.
  • fieldset은 폼요소들을 그루핑하기 위해 선언한다.
  • legend은 fieldset의 자식 엘리먼트로 그룹 이름을 표현하기 위해 선언한다.

markup

<form action="/cgi-bin/inquiry.cgi" method="post">
<fieldset>
	<legend>폼제목</legend>
	내용
</fieldset>
</form>

기본적인 컨트롤 (Input 요소)

markup

<form action="/cgi-bin/inquiry.cgi" method="post">
<fieldset>
	<legend>로그인하기</legend>
	<label for="user_name">이름 :</label> <input type="text" name="user_name" id="user_name" title="사용자ID" value="아이디를 입력하세요"  />
	<label for="userpw">패스워드 :</label> <input type="password" id="userpw" name="userpw" />
	<input type="checkbox" id="remem" name="remem" /><label for="remem">내 정보 기억하기</label>
	<input type="image" src="" alt="확인" />
</fieldset>

<fieldset>
	<legend>정렬하기</legend>
	<input type="radio" name="tx_align" id="align_lft" checked="checked"><label for="align_lft">왼쪽정렬</label> 
	<input type="radio" name="tx_align" id="align_cnt"> <label for="align_cnt">가운데정렬</label> 
	<input type="radio" name="tx_align" id="align_rgt"> <label for="align_rgt">오른쪽정렬</label>
</fieldset>

<fieldset>
	<legend>관심분야</legend>
	<input type="checkbox" name="favorites" id="news" checked="checked"> <label for="news">뉴스</label>
	<input type="checkbox" name="favorites" id="sports"> <label for="sports">스포츠</label>
	<input type="checkbox" name="favorites" id="webtoon"> <label for="webtoon">웹툰</label>
</fieldset>
</form>

type속성에 따라 다양한 종류의 컨트롤

  • text
  • password
  • checkbox
  • radio
  • submit
  • reset
  • button
  • image
  • file
  • hidden

name속성

submit, reset을 제외하고 필수 속성

value속성

초기값이 없더라도 빈값을 지정하는 것이 좋다.

그 밖의 속성

  • maxlength="최대 입력 문자수"
  • checked="ckecked"
  • disabled="disabled"
  • readonly="readonly"
  • accept="MIME타입"
  • src="URI"
  • alt="대체텍스트"

select

markup

<form>
<fieldset>
	<legend>질문하기</legend>
	<select title="질문선택" style="width:500px;">
		<option>질문을 선택하세요</option>
		<option>자신의 보물1호는?</option>
		<option>자신의 좌우명은?</option>
		<option>좋아하는 음식은?</option>
		<option selected="selected">자신의 별명은?</option>
		<option>가장 친한 친구의 이름은?</option>
		<option>가장 좋아하는 색깔은?</option>
		<option>직접입력</option>
	</select>
</fieldset>
</form>

textarea

markup

<form>
<fieldset>
	<legend>질문하기</legend>
	<textarea cols="30" rows="5"></textarea>
</fieldset>
</form>

속성

초기값이 없더라도 빈값을 지정하는 것이 좋다.

필수 속성
rows="행수", cols="열수"
기타 속성
name="이름", disabled="disabled" 조작 불가능, readonly="readonly" 읽기만

button

  • type 애트리뷰트를 button으로 선언하여 열기/닫기, 접기/펼치기 등의 UI를 제어핚다.
  • 폼 전송 역할을 하는 디자인 미적용 버튼은 submit타입을 사용한다.

markup

<button type="button">열기</button> 
<button type="submit">전송</button> 
<button type="reset">초기화</button>

속성

name="이름", type="submit / reset / button", value="값", disabled="disabled"