250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

개발노트

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

기타

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

YoonGwon 2020. 12. 15. 11:51

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">
  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"로 정보를 

보내게 된다.

 

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




728x90

'기타' 카테고리의 다른 글

Scale-out & Scale-up 이란  (0) 2021.01.14
윈도우에 개발도구 AtomEditor 설치법  (0) 2020.12.15
Linux (CentOS) 웹서버 구축 [APM-Yum설치]에서 APM 설치하기  (0) 2020.12.15
VirtualBox에서 CentOS 6.x 네트워크 설정하기  (0) 2020.12.15
VPN이란 무엇인가  (0) 2020.12.13
'기타' Related Articles more