HTML - form형식으로 텍스트 입력하는 방법
HTML 입문자라면 앞으로 게시판을 만들거나 회원가입 페이지를 만들게될 때 게시판의 텍스트 입력 방법이나 회원가입시
나오는 텍스트 박스 등 텍스트를 입력받는 방법은 자주 사용하기 때문에 알고있으면 좋은 방법 중 하나이다.
오늘은 아래와같이 HTML의 간단한 태그를을 사용하여 웹 페이지에서 form형식으로 텍스트를 입력받는 방법을 알아보자.
필자가 작성한 간단한 코드를 보고 태그의 기능들을 하나하나 알아보자.
예제)
- <html>
- <head>
- <meta charset="utf-8">
- </head>
- <body>
- <form action="http://localhost/index.php">
- <p> text : <input type="text" name="id" value="default value"></p>
- <p> password : <input type="password" name = "pwd" value ="default value"></p>
- <p> text area :
- <textarea name="" id="" cols="30" rows="10">기본값</textarea>
- </p>
- <input type="submit" value="제출">
- </form>
- </body>
- </html>
우선 <head>부분의 <meta charset="utf-8">은 인코딩 방식을 utf-8로 설정하겠다는 이야기이다.
<body>부분으로 들어가서 제일 처음 <form>이라는 태그를 보게 되는데 사용자가 로그인을하거나 회원가입을하거나
물건을사거나 또는 글을 작성할때 사용자가 입력한 <form>태그안의 정보를 action이라는 속성을 통해 서비스를
제공하는 서버에 전송할때 사용하는 태그이다.
<form>태그안에서 각 <p>태그로 단락을 나누어주고 <input>태그를 사용하여 text,password 값을 받고 <textarea>태그를
사용하여 행 30에 열 10값의 text area라는 텍스트 입력 박스를 만든다.
단, 여기서 <input>태그의 속성 value를 자세히 설명하자면 value값에는 default 값을 입력하여 기본값을 설정해 줄 수있다.
하지만 여기서 주목 할 점은 text의 값은 사용자가 값 입력시에 그대로 보여져도 상관없지만 비밀번호 같은 경우에는 타인에게
비밀번호가 그대로 노출 될 수도 있다. 이를 방지하기위해 password의 type 속성은 "password"로 설정하여 준다.
이렇게 하면 사용자가 비밀번호를 입력하는 모든 값들이 아래의 사진과 같이 감춰져서 보이게 된다.
자, 그렇다면 마지막으로 <input>태그에 type속성을 "submit"(제출 및 전송)으로 설정해준다. 저장 후 실행해보면 아래와 같이 각각의 텍스트 입력창들과
제출버튼이 페이지에 나오게 된다. 제출버튼을 클릭하게되면 <form>태그의 action속성에 설정 되어있는 경로 "http://localhost/index.php"로 정보를
보내게 된다.
여기까지 기본적인 텍스트 입력 방식을 살펴보았다.
'IT > 프로그래밍' 카테고리의 다른 글
| Phaser로 웹 게임 만들기 (2) | 2016.07.19 |
|---|---|
| 자주 쓰는 기본 태그 익히기 (0) | 2016.07.18 |
| Node.js 게시물 개수 및 번호 매기기와 페이지 나누기 (1) | 2016.07.13 |
| Node.js 클라이언트의 요청에 response를 2개 보내는 방법 (0) | 2016.07.11 |
| Node.js의 확장모듈 Express를 설치하여 웹 서버 구축하기 (0) | 2016.07.09 |
