-
HTML - <form> 태그HTML/HTML 2020. 3. 4. 21:54
오늘은 form 태그에 대해서 알아보자!
form 태그란?
→ 로그인을 하거나 회원가입을 하거나 물건을 사거나 글을 작성할 때, 입력한 정보를 서비스를 제공하는 서버한테 정보를 전송할 때 사용하는 글자를 입력하는 것들 또는 무언가 선택하는 것들을 우리는 form이라 부른다.
즉, 사용자가 입력한 정보를 서버로 전송할 때 사용할 때 쓰는 태그가 form 태그이다.
그러면 form 태그로 과연 어떠한 것을 보낼까?
우선 사용자가 입력한 정보를 서버로 전송하기 위해서는 사용자로부터 정보를 입력 받을 수 있는 것을 만들어야 한다.
그때 사용하는 태그가 바로 input태그이다.
input 태그에 type이라는 속성에 text라고 설정하게 되면, 사용자로부터 문자 정보를 일력 받을 수 있는 박스가 생긴다.
<form> <p>아이디 : <input type="text"></p> </form>[결과]
또, 비밀번호를 입력받으려고 한다면, type이라는 속성에 password라고 지정해주고
몇 글자를 입력했는지는 알 수 있지만, 어떤 글자를 입력 했는지는 볼 수 없도록 하는 그런 기능이다.
<form> <p>비밀번호 : <input type="password"></p> </form>[결과]
그렇다면 이러한 정보들을 전송하려면 어떻게 해야 할까?
어떠한 버튼을 이용해서 우리가 입력한 정보를 그 서비스로 전송해야 한다.
바로 그 버튼에 type 속성에 바로 submit이라고 지정해 주면 된다.
<form> <p>아이디 : <input type="text"></p> <p>비밀번호 : <input type="password"></p> <input type="submit"> </form>[결과]
하지만!
submit 버튼을 눌렀을 때, 그 서버가 어디에 있는 서버인지를 지정해줘야 한다.
어디로 보낼 것인가에 대한 정보는 바로 form태그 안에 action이라는 속성에 url을 넣어주면 된다.
<form action="http://localhost/login.php"> <!-- action에 url 추가 --> <p>아이디 : <input type="text"></p> <p>비밀번호 : <input type="password"></p> <input type="submit"> </form>여기서 추가로 우리가 어떤 정보를 서버로 전송하려면, 사용자가 입력창에 입력한 그 값에 이름을 부여해야만 서버 쪽에서 그것을 알아낼 수 있다.
그렇기 때문에 어떠한 정보를 서버에 보낼 때, name이라는 속성을 써야 하고 모든 form 태그에 다 필요하다.
<form action="http://localhost/login.php"> <p>아이디 : <input type="text" name="id"></p> <!-- name="id" 추가 --> <p>비밀번호 : <input type="password" name="pwd"></p> <!-- name="pwd" 추가 --> <input type="submit"> </form>이렇게 보내진 name 값이 "http://localhost/login.php"에서 받고 처리된다.
추가로,
만약 사용자가 웹 페이지를 열었을 때, 입력 상자에 기본적으로 뭔가 넣고 싶을 때,
value라는 속성으로 값을 지정해 놓으면 된다.
<form> <p>아이디 : <input type="text" value="javascript"></p> </form>
또, textarea라는 것이 있다.
사용자가 입력한 값들을 여러 줄로 입력할 수 있다.
<html> <body> <p>textarea :<textarea></textarea></p> </body> </html>
cols(너비)와 rows(높이)로 텍스트 박스의 크기를 변경할 수 있고, textarea는 기본값 설정을 <textarea> </textarea> 사이에 쓴다.<html> <body> <p>textarea :<br><textarea cols="50" rows="6">default value</textarea></p> </body> </html>
'HTML > HTML' 카테고리의 다른 글
HTML - <table>태그 (0) 2020.03.02 HTML - img태그 (0) 2020.02.29 HTML - <p>태그 / <br>태그 (0) 2020.02.26 HTML - <ul> 태그 / <ol>태그 (0) 2020.02.25 HTML - <a>태그와 속성 (0) 2020.02.24