Doit!-개인공부(HTML+CSS+자바스크립트)

09. DOIT - 입력 양식 작성하기(폼 삽입하기)

코골면서 딩가딩가 2024. 4. 17. 14:24

·  폼(form)이란?

폼이란 사용자가 정보(아이디, 비밀번호, 로그인 버튼, 회원 가입 등)를 웹 사이트로 보낼수 있는 요소를 이라고 합니다.과 관련된 작업은 정보를 저장하거나 검색, 수정하는 것이 대부분인데 모두 데이터베이스를 기반으로 작동합니다. 따라서 텍스트 박스나 버튼 같은 폼 형태는 HTML 태그로 만들지만, 폼에 입력한 사용자 정보는 ASP PHP JSP 등과같은 서버 프로그래밍을 이용해 처리합니다.

<form [속성="속성값"]>여러 폼 요소</form>

 

 

·  폼<form> 태그의 속성

종류 설명
method 클라이언트가 입력한 내용을 서버 쪽으로 넘겨주는 것을 지정합니다.
· get : 데이터를 256~4096byte까지만 서버로 넘길 수 있다.  
· post : 내용의 길이에 제한 받지 않고 사용자가 입력한 내용도 표시x
name jsp로 폼을 제어할 때 사용할 폼의 이름을 지정한다.
action <form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정한다.
target action 속성에서 지정한 파일을 현재 창이 아닌 다른 위치에서 열도록 해준다.

 

 

·  자동완성기능 <autocomplete> 속성

autocomplete는 폼에서 내용을 입력할 때 예전에 입력한 내용을 자동으로 표시해 주는 것을 자동 완성 기능이라고 합니다.

<form action=" autocomplete="on">
</form>

 

자동 완성 기능은 autocomplete 속성을 사용하며 기본 속성값은 "on" 입니다.  즉, 자동 완성이 기본으로 켜져 있으므로 입력한 적 있는 값을 한두 글자 정도 입력하면 예전에 입력 내용을 자동으로 보여줍니다.

 

·  폼 요소를 그룹으로 묶는 <fieldset>, <legend> 태그

<fieldset> 

<fieldset [속성="속성값"]> </fieldset>

하나의 품 안에서 여러 구역을 나누어 표시할 때 <fieldset> 태그를 사용합니다.

<legend >

<fieldset> 
<legend>그룹 이름</legend> 
</fieldset>

<field> 태그로 묶은 그룹에 제목을 붙일 때 <legend>를 사용합니다.

 

<field>와<legend>태그 적용

 

 

·  폼 요소에 레이블을 붙이는 <label> 태그

<label> 태그는 <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용합니다. 레이블(label)이란 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트를 말합니다. <label> 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 알 수 있습니다.

<label>레이블명<input></label>

 

<label> 태그 적용