HTML form input 텍스트 필드 회원가입 예제 입력양식
HTML 팁
줄 바꿈에는 <br> 태그가 있듯이 공백에는 를 입력하면 공백이 생겨납니다.
HTML을 개발도구를 이용해서 정리할 때 A태그 안에 B태그가 포함되어 있으면 B태그는 TAB키를 눌러보기 좋게 정리해 주는 것이 좋습니다.
<html>
<body>
<input type = "text">
</body>
</html>
빠르게 보기
See the Pen Untitled by loginshin (@loginshin) on CodePen.
<html>
<body>
<form action ="http://localhost/login.php">
<p>I D :<input type = "text" name = "ID"></p>
<p>P W:<input type = "password" name = "password"></p>
<p>address : <input type="text" name = "address"></p>
<input type = "submit">
</form>
</body>
</html>
<body>태그에 <input> 태그를 사용하면 type 속성에 따라 여러 텍스트 필드를 만들 수 있습니다.
즉, 사용자로 부터 좀 더 효율 적으로 정보를 입력받을 수 있습니다.
이런 식으로 양식을 만들 수 있는데 방법은 간단합니다.
<html>
<body>
<input type = "text">
</body>
</html>
<정보 받기 타입 = "텍스트">이런 식으로 해석해 봤네요
추가로 정보가 입력하면 *모양으로 가려지는 input 태그를 만들어보겠습니다.
<html>
<body>
<p>I D :<input type = "text" name = "ID"></p>
<p>P W:<input type = "password" name = "password"></p>
<p>address : <input type="text" name = "address"></p>
<input type = "submit">
</body>
</html>이름을 지정해주면 HTML로 내가 보내고자 하는 정보를 지정한 URL로 보낼 때 text가 어떤 정보인지 알 수 있다고 하네요.
value 속성에 하고 싶은 말을 적으면 사용자가 정보를 적기 전에 내가 쓴 메시지를 볼 수 있게 됩니다.
<input type="text" name="ID" value="아이디를 적으시오">
<textarea> 태그는 <input> 태그와 다르게 단독으로 사용이 가능합니다.
사용자의 정보를 텍스트로 받는데도 말이죠.
<html>
<body>
<form action="">
<p>ID: <input type="text" name ="ID"value = "아이디를 적으시오"></p>
<p>PW: <input type = "password" name = "password" value = "비밀번호를 적으시오"> </p>
<p>ad: <textarea> 기본 정보가 박스안에 기입된다</textarea>
</form>
</body>
</html>
이렇게 기본적인 회원가입 사이트를 만들 수도 있습니다.
textarea에 가로세로 속성을 부여해보자면
<textarea cols="50" rows="5"> 기본 정보가 박스 안에 기입된다 </textarea>
cols와 rows를 지정해 주면 표시되는 칸 수가 변경됩니다.
+++
백엔드를 받으시는 분이 보내달라는 URL을 받아 <from action = "url"> 태그와 속성으로 input 태그를 감싸주면 됩니다.
<html>
<body>
<form action ="http://localhost/login.php">
<p>I D :<input type = "text" name = "ID"></p>
<p>P W:<input type = "password" name = "password"></p>
<p>address : <input type="text" name = "address"></p>
<input type = "submit">
</form>
</body>
</html>