HTML5+CSS3]4-1 폼 만들기

https://www.youtube.com/user/easyspub

 

easyspub

⭐폼 : 사용자가 웹 사이트로 정보를 보낼 수 있는 요소

 

✔웹에서 자주 만나는 폼

👉폼과 관련된 대부분의 작업은 정보를 저장하거나 검색, 수정하는 일인데 이런 작업은 모두 데이터베이스를 기반으로 한다.

👉텍스트 상자나 버튼 같은 폼의 형태를 만드는 것은 HTML 태그를 이용한다

👉폼에 입력한 사용자 정보를 처리하는 것은 ASP나 PHP, JSP같은 서버 프로그래밍을 이용한다

 

✔<form>태그 : 폼 만들기

👉기본형 : <form [속성="속성 값"]>여러 폼 요소 </form>

<form>태그와 </form>태그 사이에 여러 폼 요소와 관련된 태그를 넣는다.

 

✔form태그의 속성

 

✔예제)폼 만들기

<form action="search.php" method="post">

<input type="text" title="검색">

<input type="submit" value="검색">

</form>

 

👉autocomplete속성 : 자동 완성 기능

사용자가 입력했던 내용을 기억했다가 비슷한 내용을 입력할 경우, 이전에 입력했던 내용을 힌트로 보여준다.

기본값은 on이다.

자동 완성 기능을 끌 때는 off로 지정한다.

ex)<form action="파일" autocomplete="off">

</form>

 

✔<label>태그 : 폼 요소에 레이블 붙이기

입력 창 옆에 아이디나 비밀번호처럼 붙여 놓은 텍스트

👉기본형

<label [속성="속성 값"] 레이블 <input …> </label>

또는

<label for="id이름">레이블</label>

<input id="id이름"[속성 = "속성 값">

 

👉ex)

<label>아이디(6자이상)<input type="txt"></label>

또는

<label for="user-id">아이디(6자이상)</label>

<input type="txt" id="user-id">

 

👉라디오 버튼과 체크박스에서 사용하는 <label>태그

<label>태그를 이용해 라디오 버튼이나 체크박스에 텍스트를 연결해 놓았다면 텍스트만 터치해도 라디오 버튼이나 체크박스가 선택되어 사용이 훨씬 쉬워진다

✔<fieldset>, <legend>태그 : 폼 요소 그룹으로 묶기

👉기본형 : <fieldset[속성="속성 값"]> ~~ </fieldset>

하나의 폼 안에서 여러 구역을 나누어 표시하려고 할 때 <fieldset>, <legend>태그를 사용한다.

👉<fieldset>태그는 <fieldset>와 </fieldset>태그 사이의 폼들을 하나의 영역으로 묶고 외곽선을 그려주고

👉<legend>태그는 <fieldset>태그로 묶은 그룹에 제목을 붙여 준다.