웹 폼이란 ?

웹 페이지에서 사용자 입력을 받는 폼을 말한다.

로그인, 등록, 검색, 예약, 쇼핑 등 많은 부분에서 사용하고 있다. 

 

<form> 태그 

 

1. 폼 속성 

 

- name : 폼의 이름을 지정한다.(네임값을 반드시 지정해야한다.)

- action 

    폼 데이터를 처리할 웹 서버 응용프로그램의 이름 

   submit 버튼이 눌리면 브라우저에는 action에 지정된 웹 서버 응용프로그램을 실행 요청한다.

   웹 서버 으용프로그램은 java, JSP, PHP, C/C++등 다양한 언어로 작성한다.

- method 

   폼 데이터를 웹 서버로 전송하는 형식이다.

   대표적인 전송 방식 > GET, POST

 

2. 폼 요소의 종류

 

 

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>폼 만들기(로그인 폼)</title>
    <script> 
        function check(){
        f = document.frm;
        if(f.id.value==""){alert("아이디를 입력하세요.");
        return;}
        }
    </script>
</head>
<body>
    <h3>로그인 폼</h3>
    <form name="frm" method="" action="">
        <!--action : 요청 page를 지정하는 값이 들어가는 곳-->
        ID : <input type="text" size="15" name="id" value=""><br>
        PWD : <input type="password" size="15" name="pwd"><br>
        <input type="submit" value="로그인" onclick="check()">
    </form>
</body> 
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

 

 

위 코딩 화면구현 결과

 

다만 vs code 프로그램은 동적 화면은 적용이 어려워, eclipse 프로그램으로  tomcat 서버를 연결하여 동적화면 구현 

eclipse 화면으로 코딩 

 

 

'화면구현' 카테고리의 다른 글

텍스트 상자, datalist, 텍스트 버튼 만들기  (0) 2020.03.04
검색창 만들기  (0) 2020.03.04
HTML 오디오, 비디오 삽입하기  (0) 2020.03.04
HTML 인라인 프레임 - target 속성  (0) 2020.03.04
HTML 인라인 프레임  (0) 2020.03.03
웹 폼 :: 2020. 3. 4. 20:00 화면구현
openclose