웹페이지를 제작하다 보면 사용자의 정보를 받아야 하는 경우가 발생합니다. 사용자가 특정 사이트를 이용하기 위해 회원가입을 하려 하는 경우가 대표적인 경우입니다. 이 경우 사용자가 사용할 아이디, 비밀번호를 입력해주면 이 정보를 전달받아야 합니다. 이를 가능하게 해주는 것이 form입니다.
form을 만들 때는 <form> 태그를 사용합니다. <form> 태그의 속성은 아래의 표와 같습니다.
| 속성 | 설명 |
| method | 폼의 전송 방식. 길이 제한이 없는 post값을 사용. |
| name | 폼의 이름. |
| action | 폼을 전송할 서버 쪽의 스크립트 파일로 지정. |
| target | action에서 지정한 스크립트 파일이 열리는 위치 지정. |
(실습1) form 만들기
아래와 같은 회원가입 폼을 만들어보겠습니다. 아이디와 비밀번호를 입력받고 SignUp을 누르면 회원가입이 되는 구조입니다.
위의 폼을 만드는 코드를 먼저 보여드리면 다음과 같습니다.
<head>
<style>
ul{
list-style-type: none;
}
</style>
</head>
<body>
<font size=5>Do SignUp</font>
<form action="signup.php" method="post">
<ul>
<li>ID : <input type="text" id="id"></li>
<li>PW : <input type="text" id="pass"></li>
</ul>
<ul><li> <input type="submit" value="SignUp"></li></ul>
</form>
</body>
<form action="singup.php" method="post">는 sighup.php라는 곳에 입력받은 정보를 보내겠다는 의미입니다. 현재 해당 글은 프런트엔드 영역만 다루기 때문에 signup.php에 대한 내용은 생략하겠습니다. 단순히 signup.php는 form을 통해 입력받은 내용을 실제로 처리하는 부분이라 생각하고 넘어가시면 됩니다.
(실습 2) 텍스트 상자 이외의 form 만들기
실습 1에서는 사용자의 정보를 텍스트 상자를 이용해서 받는 폼을 만들어봤습니다. 지금부터는 텍스트 상자 이외의 방법(라디오 버튼, 체크 박스)으로 받는 방법에 대해 알아보겠습니다.
먼저 라디오 버튼 방식부터 살펴보겠습니다. 라디오 버튼의 경우 <input> 태그의 type 속성을 radio로 지정해주면 됩니다. (실습 1)의 코드에서 <ul> 블록 내부의 <li> 태그의 내용을 아래와 같이 바꿔주면 됩니다.
<ul>
<font size=3>성별</font>
<li> 남 <input type="radio"></li>
<li> 여 <input type="radio"></li>
</ul>
<ul><li> <input type="submit" value="signUp"></li></ul>
그럼 아래와 같이 라디오 버튼을 사용한 폼을 생성할 수 있습니다.
다음으로 체크 박스 방식을 살펴보겠습니다. 체크 박스의 경우 <input> 태그의 type 속성을 checkbox로 지정해주면 됩니다. (실습1)의 코드에서 <ul> 블록 내부의 <li> 태그의 내용을 아래와 같이 바꿔주면 됩니다.
<ul>
<li> 웹서핑 <input type="checkbox"></li>
<li> 광고 <input type="checkbox"></li>
<li> 지인추천 <input type="checkbox"></li>
</ul>
<ul><li><input type="submit" vaule-"SignUp"></li></ul>
그럼 아래와 같이 체크 박스를 사용한 폼을 생성할 수 있습니다.
(실습3) form 구역 나누기
form을 통해 입력받아야하는 정보가 많을 때 구별을 위해 form의 구역을 나눌 수 있습니다. 이 경우 <fieldset>과 <legend> 태그를 사용합니다. <fieldset> 태그는 같은 구역으로 묶을 요소들을 지정할 때 사용됩니다. <legend> 태그는 <fieldset> 태그 내부에 작성하며 <fieldset> 태그를 통해 나누어진 구역의 이름을 지정할 수 있습니다.
아래와 같은 폼을 만들어 보겠습니다.
<fieldset>태그를 사용해 같은 구역으로 묶을 요소들을 구별해 줍니다. ID와 PW, 남과 여, 그리고 나머지 요소들 총 3개의 구역으로 나누어져있으므로 3개의 <fieldset> 태그가 필요합니다. 구역을 나눈 후에는 이 구역이 어떤 구역인지 알려주는 정보가 필요합니다. <legend> 태그를 사용해 구역의 이름을 지정해줍니다.
<head>
<style>
ul{
list-style-type: none;
}
</style>
</head>
<body>
<font size=5>Do SignUp</font>
<form action="signup.php" method="post">
<fieldset>
<legend>기본정보</legend>
<ul>
<li>ID : <input type="text" id="id"></li>
<li>PW : <input type="text" id="pass"></li>
</ul>
</fieldset>
<fieldset>
<legend>개인정보</legend>
<ul>
<font size=3>성별</font>
<li>남<input type="radio"></li>
<li>여<input type="radio"></li>
</ul>
</fieldset>
<fieldset>
<legend>기타정보</legend>
<ul>
<li>웹서핑 <input type="checkbox"></li>
<li>광고<input type="checkbox"></li>
<li>지인추천<input type="checkbox"></li>
</ul>
<ul><li> <input type="submit" value="SignUp"></li></ul>
</fieldset>
</form>
</body>
'Programming > HTML5 & CSS3' 카테고리의 다른 글
| [HTML] 드롭다운 목록 만드는 법 (0) | 2021.01.23 |
|---|---|
| [HTML] input 태그 사용해 사용자 입력 받기 (0) | 2021.01.22 |
| [CSS] 리스트 스타일 - 가로 리스트 빈 공간 없이 배경색 채우기 (0) | 2020.12.22 |
| [CSS] 리스트 스타일 - 가로 리스트 만들기, 리스트 색 변경 (0) | 2020.12.21 |
| [CSS] 리스트 스타일 - 불릿, 숫자 변경 및 제거 (0) | 2020.12.20 |
