forms

 

-<form>

:사용자와 정보교환을 가능하게 하는 입력양식을 만들 때 사용하며 클라이언트와 서버간의 의사소통을 하는 데 중요한 역할을 한다. 입력양식이란 방명록이나 게시판, 설문조사, 회원등록 폼 등을 말하는데, 입력양식의 처음과 끝에는 반드시 form 요소가 들어가게 된다.

 

<form> 요소는 아래의 하위요소들을 포함할 수 있다.

• input
• textarea
• button
• select
• option
• optgroup
• fieldset
• label

<form action="form_action.asp" method="get">...</form>

accept  -    MIME_type : HTML5 미지원 서버에 접근하는 파일 종류를 지정한다.

accept-charset  -  character_set : 서버가 처리할 수 있는 양식 데이터를 캐릭터셋으로 지정한다.

action -    URL : 입력된 데이터(속성)가 전송될 페이지를 지정한다.

entype  -   entapplication/x-www-form-urlencoded :  post 방식일 때 양식데이터가 서버로 보내지기 전에 인코딩되어야 하는 방법을 지정
                multipart/form-data :
                text/plainype :

method  -  get : 입력 데이터가 처리될 방식을 지정해 주며 get과 post 두 가지 값이 있다. get값이 default이며 브라우저 주소 표시줄에 작성된 내용을 볼 수 있도록 지정. 일반적인 검색 및 카운터 이용 시 주로 사용되며 보안적으로 약하다. 

                post : 입력된 내용을 사용자가 볼 수 없도록 숨겨서 전달(내부 url). DB화 될 경우 많이 사용되며 보안에 강하다.

name  -   text : 전송 될 데이터의 이름을 지정한다.(해당 입력 양식이 어느 form에서 만들어졌는지 식별하기 위함)

target  -  _blank : form이 전송될 페이지로 이동할 때의 페이지 이동방식을 정한다. 새 창   , 프레임, 현재 창, 부모 창 등

             _self :            

 _parent :  
 _top :

autocomplete (new)  -  on : 폼의 자동완성 기능을 지정할 수 있다.
                                 off :

novalidate (new)  -  novalidate : 폼을 전송할 때 유효성에 대해 체크하지 않는다고 지정할 수 있다.

 

사용 예)

<form action="login_result.asp" method="get">
  <p>아이디: <input type="text" name="user_id" /></p>
  <p>비밀번호: <input type="password" name="user_pw" /></p>
  <input type="submit" value="로그인" />
</form>

 

-<input />

:사용자가 글자, 텍스트를 넣을 수 있도록 한다. Input 영역의 기본값은 text이고, 타입(속성)을 지정하여 옵션을 넣으면 한 줄 글상자, 확인 상자, 라디오 버튼, 입력버튼, 그림 등의 다양한 방법으로 설정할 수 있다.

HTML에서는 닫는 태그 없이 사용하지만, XHTML에서는 반드시
<input />와 같이 닫는 태그를 사용하여야 하며, 입력요소를 위한 레이블을 정의하기 위해서는 <label>태그를 사용한다.

 

<input type="text" name="user_name" id="user_name" />

accept  -  audio/*, video/*, image/* ,MIME_type : 타입 속성값이 file일 경우, 업로드할 파일의 MINE 타입을 지정한다.

align  -  left, right, top , middle, bottom : HTML4에서 삭제되었으며, HTML5에서는 지원하지 않는다. 정렬 방법을 지정하는 속성이지만 css(스타일)로 대신 사용한다.

alt  -  text : 타입 속성 값이 “image”일 경우 이미지 대신 표시할 대체 텍스트를 지정한다.

checked  -  checked : 타입 속성 값이 “checked”, “radio”일 경우, 체크된 상태로 표시하게 한다.

disabled  -  disabled : 페이지가 로드될 때 폼 구성요소를 선택할 수 없게 한다. 수정이 불가능하며 데이터 전송도 되지 않는다.

maxlength  -  number : 타입 속성 값이 “text”, “password”일 경우, 입력 가능한 최대 문자 수를 지정한다.

name  -  text : 입력 요소의 이름을 지정한다.

readonly  -  readonly : 타입 속성 값이 “text”, “password”일 경우, 요소의 값을 수정할 수 없는 읽기전용으로 지정하며, disabled와 다르게 데이터 전송은 가능하다.

size  -  number : 타입 속성 값이 “image”일 경우, 전송 버튼 이미지의 url을 지정한다.

type  -  button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week : 입력 구성 요소의 종류를 지정한다.

value  -  text : 입력 구성 요소의 값을 지정한다.

autocomplete(new)  -  on, off : 기본 값은 on 이다. 개인정보와 같은 보안에 민감한 내용은 off 로 하고, 검색이나 공개되어도 되는 정보는 on 을 사용할 수 있다.

autofocus(new)  -  autofocus : 값은 autofocus 은 하나이며 페이지가 로딩되었을 때 키보드 포커스가 해당 input에 위치하도록 한다.

form(new)  -  form_id : 해당 input 요소가 form 외부에 위치했을 때 input에 form 속성을 추가하여 연결하고자 하는 form 의 id값을 적어주면 그 폼에 속하게 된다.

formaction(new)  -  URL : type=”submit” 과 type=”image”에만 사용하며 해당 submit 기능을 받는 페이지의 url을 값에 적어준다.

formenctype(new)  -  application/x-www-form-urlencoded, multipart/form-data, text/plain : type=”submit” 과 type=”image”에만 사용하며 submit 할 때 form-data의 엔코딩 형식을 알려준다.

formmethod(new)  -  get, post : type=”submit” 과 type=”image”에만 사용하며 submit 할 때 post 방식인지 get 방식인지 URL 형태를 지정해준다.

formnovalidate(new)  -  formnovalidate : type=”submit”에만 사용하며 값의 유효성을 검증하지 않고 그대로 submit 시킨다. 값은 속성 이름과 같이 formnovalidate를 적어준다.

formtarget(new)  -  _blank, _self, _parent, _top, framename : type=”submit” 과 type=”image”에만 사용하며 submit된 결과를 어떤 브라우저 형식으로 보여줄 지 지정한다.

width, height(new)  -  pixels : type=”image”에만 사용하며 pixel단위이다.

list(new)  -  datalist_id : 입력될 값의 옵션을 미리 제안해주는 속성이며 html5의 새로운 요소인 list의 id값과 매칭시켜주면 된다. 기능적인 면에서는 자동완성검색과 비슷하며 마크업 면에서는 select의 option과 비슷하다. 단지 input 자체에 option 요소가 있는 것은 아니라는 것이다.

 

사용 예)

<form action="example.jsp">
  <p><label for="id">아이디<label><input type="text" name="id" id="id" /></p>
  <p><label for="password">비밀번호<label><input type="password" name="password" id="password" /></p>
  <input type="submit" value="확인" />
</form>

 

 

-<textarea>

:여러 줄의 텍스트를 입력할 수 있는 상자를 만들 때 사용한다.
textarea는 문자의 제한이 없고, 고정 너비 글꼴 내에서 텍스트 렌더링이 가능하다. 글자입력상자의 크기는 cols와 rows속성으로 지정하는데, 더 좋은 방법은 CSS의 높이, 너비 속성으로 지정하는 것이다.

 

<textarea rows="2" cols="20">htmlcss.kr</textarea>

cols : 필수 화면에 표시할 줄 수를 지정한다.

rows : 필수 한 줄에 들어갈 문자의 수를 지정한다.

disabled : 사용할 수 없는 상태로 지정한다.

name : 요소의 이름을 지정한다.

readonly : 수정이 불가능하도록 지정한다.

 

 

-<button>

:버튼을 만들 때 사용한다.
버튼 요소를 사용하면 글자나 이미지와 같은 컨텐츠를 넣을 수 있는데, 이것은 input요소를 사용하여 생성된 버튼과의 차이점이다. 항상 버튼의 타입 속성을 지정해야 하며, IE 브라우저의 기본 타입은 “button”, 다른 브라우저에서는 “submit”을 기본값으로 한다.

 

<button type="button">Click</button>

disabled : 버튼을 누를 수 없는 상태로 지정한다.

name : 버튼 요소의 이름을 지정한다.

type : 버튼의 종류를 지정한다.
- submit : 보내기(default)버튼
- button : 일반버튼
- reset : 입력값을 모두 초기화로 설정하는 버튼

value : 버튼 요소의 값을 지정한다.

 

*만일 HTML form안에서 ‘button요소’를 사용한다면, IE가 아닌 다른 브라우저는 다른 값을 전송할 것이다. IE는 다른 브라우저가 속성값의 내용을 전송하는 동안, <button>과 </button>태그 사이에 텍스트를 전송한다. 따라서 HTML form 안에서 버튼을 만들기 위해서는 ‘input 요소’를 사용해야 한다.

 

 

-<select>

:선택 메뉴(drop-down list)를 만들 때 사용한다. select 요소 내의 <option>태그는 목록에 있는 사용 가능한 옵션을 정의한다. select요소는 form 컨트롤 및 사용자가 입력한 값을 수집하는 형태로 사용할 수 있다.

 

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>

disabled : 드롭다운 목록(구성요소)을 선택할 수 없게 지정한다.

multiple : 다중선택 할 수 있도록 지정한다.

name : 요소의 이름을 지정한다.

size : 드롭다운 목록(구성요소) 항목의 개수를 지정한다.

 

 

-<optgroup>

:<select>요소에 포함된 여러 옵션을 그룹으로 묶어줄 때 사용한다. 긴 목록의 옵션을 포함한다면, 연관된 옵션을 묶어줌으로써 사용자가 편리하게 사용할 수 있게 한다.

 

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

label : 옵션 그룹에 대한 설명을 지정한다.

disabled : 옵션 그룹을 사용할 수 없는 상태로 지정한다.

 

 

-<option>

:select요소 안에서 선택 항목을 나타내는 옵션을 지정하며, 긴 목록의 옵션이라면 연관된 옵션을 <optgroup>과 같이 그룹으로 묶어준다. HTML 안에서 <option>태그는 닫는 태그 없이 사용하지만, XHTML에서는 반드시 닫는 태그와 같이 사용해야 한다.

 

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>

disabled : 옵션을 사용할 수 없는 상태로 지정한다.

label : 옵션에 대한 레이블을 텍스트로 지정한다.

selected : 해당 옵션 항목이 기본값으로 선택되도록 지정한다.

value : form이 전송되었을 때 서버로 보내지는 초기값을 지정한다.

 

 

-<label>

:input요소에 라벨을 지정할 때 사용한다.
라벨 요소는 사용자에 대해 특별히 렌더링 되지 않는데, 사용자가 라벨 요소 안의 글자를 클릭할 때 전환되게끔 컨트롤하기 때문이다. 이는 마우스 사용에 편리함을 더한다. <label>태그의 속성은 관련된 묶인 요소의 id속성과 매칭시켜 사용해야 한다.

 

<form>
  <label for="email">email</label>
  <input type="checkbox" name="email" id="email" /> 
</form>

for : 라벨에 표시되는 양식폼 요소의 이름을 지정한다.

 

 

-<fieldset>

:form안에 논리적으로 묶인 구성요소를 그룹으로 묶을 때 쓰이며, 사각형 모양으로 표시된다. <fieldset>요소의 제목은 <legend>태그를 사용한다.

 

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30" /><br />
    Email: <input type="text" size="30" />   
  </fieldset>
</form>

 

 

-<legend>

:fieldset요소에 의해 묶여진 내용의 제목을 정의한다.

 

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30" /><br />
    Email: <input type="text" size="30" />   
  </fieldset>
</form>

 

 

출처 : http://htmlcss.kr/html/forms/