[Web/HTML] HTML - 폼(form) 삽입하기

✏️ form(폼)이란?

웹에서 친숙히 볼 수 있는 아이디, 비밀번호를 입력하거나 로그인, 회원 가입 버튼 등 사용자가 웹사이트로 정보를 보낼 수 있는 요소들을 칭함. 사용자가 폼을 통해서 정보를 입력하게 되면 그 정보들은 웹 서버로 전송되고, 서버는 그 정보들과 자신이 가지고 있는 데이터를 비교해서 그 결과를 웹 브라우저로 다시 전송.  텍스트 박스나 버튼 같은 폼 형태는 html태그로 만들어지고, 폼에 입력한 사용자 정보는 ASP, PHP, JSP 같은 서버 프로그래밍을 이용해 처리

 

✏️ 폼을 만드는 <form> 태그

폼을 만드는 가장 기본적인 태그로써 <form>과 </form>태그 사이에 여러 가지 폼 요소들을 삽입

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

// form 태그의 여러 가지 속성들
// method : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정, get과 post속성 사용 가능
            get : 데이터를 256~4096byte까지만 서버로 넘김, 주소 표시줄에 사용자가 입력한 내용이 그대로 드러남
            post : 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않음
// name : 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정
// action : <form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정
// target : action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함
// autocomplete : 폼에서 내용을 입력할 때 이전에 입력한 내용을 자동으로 표시해주는 속성, 예전 내용을 기억하고 있다                                가 비슷한 글자가 입력되면 이전 내용을 힌트로 보여주며 "on"과 "off"로 지정가능하며 기본 값은 "on"

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

<fieldset [속성="속성값"]></fieldset>
<fieldset><legend>그룹 이름</legend></fieldset>

// 하나의 폼 안에서 여러 구역을 나누어 표시할 때는 <fieldset> 태그를 사용
// <legend> 태그는 <fieldset> 태그로 묶은 그룹 안에서 그룹에 제목을 붙일 수 있음

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

// <label> 태그는 <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용
// label이란 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트를 말하며, 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 웹 브라우저가 알 수 있게 함

// 1. 태그 안에 폼 요소 넣기
<label>레이블명<input></label>
<label>아이디 입력<input type="text"></label>

//2. <label> 태그와 폼 요소를 따로 사용하고 <label>태그의 for속성과 폼 요소의 id속성을 이용해 서로 연결, 다시 말해 폼 요소의 id속성값을 <label> 태그의 for 속성에게 알려줌
<label for="id명">레이블명<input id="id명"></label>
<label for="user-id">아이디 입력</label>
<input type="text" id="user-id">