프론트엔드/HTML

Tag - form 관련

ksge7 2020. 8. 20. 02:41

폼이란?

아이디와 비밀번호를 입력하거나 하는 등 사용자가 웹사이트로 정보를 보낼 수 있는 요소들을 폼이라고 한다.

 

폼과 관련된 대부분 작업은 정보 저장, 검색, 수정인데 이는 데이터 베이스를 기반으로 한다.

 

따라서 텍스트 상자, 버튼 같은 폼의 형태를 만드는 것은 HTML 태그를 이용한다.

 

그리고 사용자 정보를 처리하는 것은 ASP, PHP, JSP같은 서버 프로그래밍을 이용한다.

 

<form> 태그 이용하기

<form> 태그는 폼을 만드는 가장 기본적인 태그다.

 

폼을 통해 사용자가 입력한 자료를 서버로 어떤 방식으로 넘길 것인지, 어떤 프로그램을 이용해 서버에서 처리할 것인지 지정할 수 있다.

 

폼 태그는 다음과 같은 속성을 갖는다.

 

속성

설명

method

사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정한다.

get - 주소 표시줄에 사용자가 입력한 내용이 그대로 드러납니다.

256byte~4096byte까지의 데이터만 서버로 넘길 수 있다.

post - 대부분 이 방식을 사용한다.
사용자의 입력을 표준 입력(standard input)으로 넘겨주기 때문에
입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않는다.
다만 get에 비해 속도에서 약점이 있다.

name

폼의 이름을 지정한다.

한 문서 안에 여러 개의 <form> 태그가 있을 경우, 폼들을 구분하기 위해 사용한다.

action

<form> 태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정한다.

targer

action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다.

 
<body>
<form action="search.php" method="post">
	<input type="text" title="검색">
    <input type="submit" value="검색">
</form>
</ody>

 

위와 같이 만들어주면 된다.

 

위의 경우 form 내부의 사용자 입력한 정보를 'search.php' 파일로 전송되어 정보를 처리하도록 설정하였다. 그리고 정보 전달시 post 방식으로 정보를 전달하도록 지정했다.

 

<label> 태그 - 폼 요소에 이름 붙이기

폼은 <form> 뿐만 아니라 <input> 등 다양한 태그로 구성되어 있다.

 

그 중에서 <label>은 폼 요소에 일종의 이름을 붙여주는 역할을 한다.

 

<body>
<form>
    <label for="user_id"> 아이디 </label>
    <input type="text" id="user_id">
/<form>
</body>

 

위 예시처럼 사용자의 입력을 받은 <input> 태그의 아이디값을 <label>태그가 for 속성으로 받아 둘을 연결하게 된다.

 

이외에도 간단히 써주기 위해서 다음과 같이 사용도 가능하다.

 

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

 

위 예시의 경우 <label> 태그로 <input> 태그를 감싸주면서 id값 없이도 둘이 연결되게 만들었다.

 

간단한 예시의 경우 두번째 방법처럼해도되지만, 코드가 복잡해지면 id값으로 서로를 구분할 수 있다는 점에서 첫번째 방법이 더 유용하다.

 

<label>와 'radio' 버튼, 'checkbox' 버튼

일반적으로 'radio'버튼, 'checkbox'버튼을 쓸 때 체크란을 마우스로 클릭해서 선택지를 선택해야한다.

 

그러나 <label> 기능을 쓰면 텍스트만 클릭하고도 선택지를 선택할 수 있다.

 

<body>
    <ul>
        <li> <input type="radio" name="subject" value="en"> 영어회화 </li>
        <li> <input type="radio" name="subject" value="ch"> 중국어 회화 </li>
        <li> <input type="radio" name="subject" value="jp"> 일본어 회화 </li>
    </ul>
</body>
<body>
    <ul>
        <li>
            <label><input type="radio" name="subject" value="en"> 영어회화 </label>
        </li>
        <li>
            <label><input type="radio" name="subject" value="ch"> 중국어 회화 </label>
        </li>
        <li>
            <label><input type="radio" name="subject" value="jp"> 일본어 회화 </label>
        </li>
    </ul>
</body>

 

위 코드에서 <label>로 감싸지 않은 리스트는 직접 체크박스를 클릭해야 해당 선택지 체크가 가능하다.

 

하지만 <label>로 감싼 리스트는 체크 박스가 아닌 체크박스의 텍스트만 클릭해도 해당 선택지 체크가 가능하다.

 

<fieldset>과 <legend> 태그 - 폼 요소들 그룹으로 묶기

<body>
    <fieldset>
        <legend> 로그인 정보 </legend>
        <label for="name">이름</label>
        <input type="txt"" id="name">
        <label for="psw">암호</label>
        <input type="password" id="psw">
    </fieldset>
</body>

 

<fieldset>와 <legend>를 쓰면 폼 요소들을 더욱 쉽게 그룹으로 묶어줄 수 있다.

 

<fieldset>의 경우 각종 폼 요소들을 하나의 영역으로 묶고 외곽선을 그려주는 역할을 한다.

 

<legend>의 경우 <fieldset>태그로 묶은 그룹에 제목을 붙여준다.