티스토리 뷰

HTML/HTML 용어 개념

Form (HTML)

GrapeMilk 2020. 3. 30. 10:57

Goal

 - form의 개념에 대해 알아본다

 - form을 예제를 통해 알아본다

 - form을 구성하는 다양한 속성과 태그를 알아본다

1. Form의 개념 

 - 사용자가 입력한 정보를 서버에 전송할 때 이용하는 것들 

 - 사용자의 정보를 알기 위해 입력할 큰 틀을 만드는 데 사용되며, 입력된 데이터를 한 번에 서버로 전송함.

 - 전송한 데이터는 웹 서버가 처리하고, 결과에 따른 또 다른 웹 페이지를 보여줌.

 

 1)form 코드 예제

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<form action="http://localhost/login.php">
    <p>아이디 : <input type="text" name="id"></p>
    <p>비밀번호 : <input type="password" name="pwd"></p>
    <p>주소 : <input type="text" name="address"></p>
    <input type="submit">
</form>
</body>
</html>

 2)form 코드 실행 결과

 

2. Form의 다양한 속성

 

2-1 action

 - 입력한 정보를 서버로 보낼 때 어디에 보낼 것인지를 지정함

 - action="보내고자하는 주소값"을 사용하여 해당 주소로 정보를 보냄 

<form action="http://localhost/login.php"> <!-- 사용자가 작성한 정보를 login.php로 보낸다 -->

 

 

2-2 name

 - name="": 보낸 정보를 구별하기 위해, 각 보낸 값에 이름을 정해주어야 함.

    <p>아이디 : <input type="text" name="id"></p> 
    <!-- 서버에 정보를 보내면 서버가 해당 정보를 알아볼 수 있도록 name을 통해 이름을 정해주어야 함  -->

 

 

3. input 태그

 - 사용자의 입력을 받는 태그

 - type=""을 통해 입력받을 데이터의 속성을 정할 수 있다.

<html>
<body>
<p>아이디 : <input type="text"></p> <!-- text를 입력받음 -->
<p>비밀번호 : <input type="password"></p> <!-- password를 입력받음, 사용자가 입력할 때 패스워드를 가려줌 -->
</html>

 

3-1 submit

 - 입력한 정보를 서버에 전송하기 위해 사용하는 하는 버튼

 - input의 type으로 "submit" 속성을 지정하여 사용한다.

<input type="submit">

 

 4. form에 입력한 정보가 전달되는 과정 알아보기

 - 아이디 : hello, 비밀번호 : 1234, 주소 : adress를 입력한 뒤 제출 버튼을 누르면 

http://localhost/login.php?id=hello&pwd=1234&address=adress

 - 웹서버가 위처럼 url정보를 만들어 login.php페이지로 정보들을 보낸다.

 - 주소를 살펴보면, action속성에 입력하여 지시한 것 처럼 login.php페이지로 url을 통해 정보를 보내고 있고

 - input에 입력한 값들을 name속성으로 이름을 붙여서 정보들을 전달하는 것을 알 수 있다.

 - input에 입력한 정보들은 url부분(http://localhost/login.php)뒤에 물음표(?)로 구분하여 정보들을 보내고 있다. 이런식으로 정보를 보내는 방식을 GET방식이라고한다.

 

 

*강의 참고

 

( https://opentutorials.org/course/2039/10962 )

'HTML > HTML 용어 개념' 카테고리의 다른 글

Method, Get, Post (HTML)  (0) 2020.03.30
댓글