ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 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

    댓글

Designed by Tistory.