본문으로 바로가기

HTML - 텍스트 입력

category IT/프로그래밍 2016.07.14 00:00

HTML - form형식으로 텍스트 입력하는 방법


HTML 입문자라면 앞으로 게시판을 만들거나 회원가입 페이지를 만들게될 때 게시판의 텍스트 입력 방법이나 회원가입시 

나오는 텍스트 박스 등 텍스트를 입력받는 방법은 자주 사용하기 때문에 알고있으면 좋은 방법 중 하나이다.


 오늘은 아래와같이 HTML의 간단한 태그를을 사용하여 웹 페이지에서 form형식으로 텍스트를 입력받는 방법을 알아보자. 



 필자가 작성한 간단한 코드를 보고 태그의 기능들을 하나하나 알아보자.



 예제)


    1. <html>
    2. <head>
    3.   <meta charset="utf-8">
    4. </head>
    5.   <body>
    6.       <form action="http://localhost/index.php">
    7.       <p> text : <input type="text" name="id" value="default value"></p>
    8.       <p> password : <input type="password" name = "pwd" value ="default value"></p>
    9.       <p> text area :
    10.           <textarea name="" id="" cols="30" rows="10">기본값</textarea>
    11.       </p>
    12.       <input type="submit" value="제출">
    13.     </form>
    14.   </body>
    15. </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"로 정보를 

보내게 된다.


여기까지 기본적인 텍스트 입력 방식을 살펴보았다.

신고

댓글을 달아 주세요

티스토리 툴바