K_blueprint
HTML5로 웹 폼 만들기 본문
목 차
1. 웹 폼과 폼 요소(feat. 간단한 로그인 폼 만들기)
2. 폼 태그
3. 입력칸 만들기(텍스트, 데이터)
1. 웹 폼과 폼 요소
- "웹 폼(Webform)"이란, '웹 페이지를 통해서 사용자의 입력을 받는 폼을 의미한다. 또한 이러한 폼을 만들기 위해서 사용되는 다양한 태그들을 "폼 요소(form element)"라고 한다.
- 폼은 '로그인', '등록', '검색', '예약', '쇼핑' 등 "사용자의 입력을 받는 웹 서비스"라면 일반적으로 사용된다.
아래는 간단한 로그인 폼을 작성한 예시이다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>로그인 웹 폼 연습</title>
</head>
<body>
<h3>로그인을 할 수 있는 폼 입니다.</h3>
<hr>
<form name="fo" method="get">
User ID : <input type = "text" size = "15" value = ""><br>
User Pw : <input type = "password" size = "15" value = "">
<input type="submit" value="제출">
</form>
</body>
</html>
- 기본적으로 폼 요소들은 '<form>'태그 안에 담기게 되고, 코드 내의 다른 태그들을 설명해 보자면 아래와 같다.
- <input type = "text" size = "15" value = " "> : 15 문자 크기의 문자열 입력 창을 만들겠다는 태그
- <input type = "password" size = "15" value = " "> : 15 문자 크기의 암호 입력 창을 만들겠다는 태그
(이는 사용자가 입력한 문자가 보이지 않는 입력 창을 말한다.) - <input type = "submit" value = "제출"> : 'submit'버튼을 만드는 태그이며, 버튼 표면에 '제출'이라는 문자가 표기된다. (일반적으로 해당 버튼을 통해서 입력된 내용을 웹 서버로 전송하지만, 해당 코드에서는 그러한 작업을 수행하는 action 속성 값을 따로 넣지 않았기 때문에 실제 제출 기능은 없다.)
위의 코드를 실행시키게 되면 아래와 같은 모습의 브라우저가 출력되게 된다.
또한 각각의 입력 칸에 사용자의 입력을 받을 수 있도록 되어있는 모습을 볼 수 있다.
2. 폼 태그
- '<form>' 태그는 다양한 속성을 가지게 되는데 이러한 속성 5가지 정도에 대해서 알아보자.
- name : 폼의 이름을 지정하는 속성(JS에서 사용된다.)
- action : 폼 데이터를 처리할 웹 서버 응용프로그램의 이름 URL을 입력하여 연결하는 속성
- method : 폼 데이터를 웹 서버에 전송하는 방식을 지시하는 속성
- enctype : 폼 데이터를 웹 서버로 전송할 때 암호화의 방식을 지정하는 속성
- target : 웹 서버 응용프로그램으로부터 전송받은 데이터를 출력할 윈도우의 이름을 연결하는 속성
3. 입력칸 만들기
- 마지막으로 주소나 이름 등의 한 줄 텍스트를 입력받는 창인 "텍스트 입력 칸"과 데이터 목록에서 값은 선택할 수 있는 "데이터 리스트"를 만들어 보자.
● <textarea> : 주소나 이름 등 '한 줄 텍스트를 입력받는 창'을 만들 수 있다.
<input type = "text" value = "초기에 출력되는 문자열">
- 만약 '암호' 즉, 패스워드를 입력받고 싶을 땐 type을 'password'로 지정해 주면 된다.
<input type = "password" value = " ">
- 여러 줄의 텍스트를 입력받을 때는 <textarea></textarea> 태그를 사용하면 된다.
<textarea cols = "20" rows = "5">
내용을 입력받는 공간입니다.
여러 줄로 입력할 수 있습니다.
</textarea>
아래는 위의 코드들을 사용해서 예시로 만든 코드이다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>자소서 쓰기</title>
</head>
<body>
<h3>로그인하고 자소서 쓰기</h3>
<hr>
<form>
이름 : <input type = "text" value = ""><br>
암호 : <input type = "password" value = "" maxlength="4"><br>
자소서 : <textarea cols="20" rows="5"></textarea>
</form>
</body>
</html>
- 해당 코드를 실행하면 아래와 같이 로그인과 자소서를 작성할 수 있는 브라우저가 출력되게 된다.
● <datalist> : 미리 선택받을 값을 보여주고 사용자가 그중에서 고르는 입력 창이다.
- 사용자가 선택 가능한 데이터의 목록을 <datalist></datalist>로 만들고, <input> 태그의 list속성 값과 <datalist>의 id속성 값을 동일하게 주어 연결한다.
아래는 예시 코드이다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>데이터 리스트 연습</title>
</head>
<body>
<h3>데이터 리스트 연습</h3>
<hr>
<form>
나라 : <input type ="text" list = "countries"><br>
<datalist id = "countries">
<option value="캐나다">
<option value="미국">
<option value ="브라질">
</datalist>
</form>
</body>
</html>
해당 코드를 실행하게 되면 아래와 같이 정해진 값을 입력받을 수 있는 텍스트 입력칸이 나오게 된다.
※ 해당 게시물은 "HTML5+CSS3+Javascript 웹 프로그래밍"도서를 참고하여 작성되었습니다. ※
'HTML & CSS & Java script' 카테고리의 다른 글
| HTML5로 여러가지 입력 만들기 (3) | 2024.11.11 |
|---|---|
| 버튼, 체크박스, 콤보박스 만들기 (3) | 2024.11.10 |
| HTML5의 문서 구조화 (10) | 2024.11.08 |
| 미디어(오디오, 비디오) 삽입하기 (4) | 2024.11.07 |
| HTML5로 '파일 다운로드 링크', '인라인 프레임' 만들기 (0) | 2024.06.04 |
