본문 바로가기
HTML/생활코딩

[HTML 기초] 입력양식 -form(3) label/method/post

by Meaning_ 2021. 11. 12.
728x90
반응형

label

label은 이름표의 기능을 해준다.

<label> text</label>을 함으로써, text라는 문자가 이름표의 기능을 하는 것을 알려준다.

주요 속성은 for과 id인데

label의 for값과 양식의 id가 같으면 연결된다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
    <body>
        <form action="">
            <p> 
                <label>text</label>
                <input type="text" name="id" value="텍스트를 입력하세요"></p>
              
            <p>
                <label>password</label>
                <input type="password" name="pwd" value="비밀번호를 입력하세요"></p>
            <p> textarea:
                <textarea cols="50"rows="10">쓰고 싶은 말 적으셈! 이건 길게 적어도 된당</textarea>
                </textarea>
            </p>
        
        </form>
    </body>
</html>
cs

 

<label for="">

각각의 label이 누구의 이름표인지 연결해준다.

레이블이 input 태그의 이름표라는 것을 명시.

 

text 글자를 누르면 커서가 앞에 생긴 것을 볼 수 있다

 

label을 체크 박스에 활용

 

체크박스가 작기 때문에 클릭 할 때 어렵다. <label>을 통해 묶어주면 더 넓은 영역을 체크박스로 활용할 수 있다.

(내 생각에는 label이 체크 박스와 결합할 때 가장 큰 기능을 하는 것 같다.)

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
26
27
28
29
30
31
32
33
<html>
    <body>
        <form action="">
            <p> 
                <label for="id_txt">text</label>
                <input id="id_txt" type="text" name="id" value="텍스트를 입력하세요"></p>
              
            <p>
                <label for="password">password</label>
                <input id="password" type="password" name="pwd" value="비밀번호를 입력하세요"></p>
            <p> <label for="comment">textarea</label>:
                <textarea id="comment" cols="50"rows="10">쓰고 싶은 말 적으셈! 이건 길게 적어도 된당</textarea>
                </textarea>
            </p>
            <p>
                색깔을 선택하세요:<br>
                
                <label>
                    <input type="checkbox" name="color" value="red"> 붉은색
 
 
                </label>
                <label for="color_blue">
                    <input id="color_blue" type="checkbox" name="color"value="blue"> 파란색
                </label>
                
                </p>
            </p>
            
        
        </form>
    </body>
</html> 
cs

 

붉은색 옆에 체크박스를 누르면 당연히 체크가 되고, 그냥 문자열 "붉은색"을 눌러도 체크가 가능하다

 

레이블을 활용함으로써 웹페이지의 사용성을 높일 수 있다.

 

 

method

 

 

text에서 단어 입력받으면 id=입력된단어가 된다.

 

 

비밀번호까지 입력할 수 있는 코드를 추가해보았다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
    <head>
        <meta charset="utf-8">
        <body>
            <form action="http://localhost/method.php">
                id : <input type="text" name="id" >
                pwd: <input type="password" name="pwd">
                <input type="submit">
                
            </form>
        </body>
    </head>
</html>
cs

 

패스워드가 url에 노출되는 문제점이 있다.

 

그렇기에 정보를 감춰서 전달해야할 때가 있다.

 

 

method

 

get 방식/ post 방식

 

정보를 url을 통해 전달하는 방식이 get방식

정보를 url이 아닌 숨겨서 전달하는 방식이 post 방식이다.

 

 

method는 데이터를 어떤 방식으로 전달할 것인가를 정해준다.

 

method 지정하지않으면 default가 get방식이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
    <head>
        <meta charset="utf-8">
        <body>
            <form action="http://localhost/method.php"method="post">
                id : <input type="text" name="id" >
                pwd: <input type="password" name="pwd">
                <input type="submit">
                
            </form>
        </body>
    </head>
</html>
cs

 

post방식으로 지정해줬을 때 id와 pwd가 url에 드러나지 않는 것을 확인할 수 있다.

 

form을  이용해서 데이터 전송 = post방식

 

 

파일 업로드

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
    <head>
        <meta charset="utf-8">
        <body>
            <form action="http://localhost/upload.php"method="post" enctype="multipart/form-data">
                <input type="file" name="profile">
                <input type="submit">
 
            </form>
            
 
        </body>
    </head>
</html>
cs

 

파일 업로드 할 때는 method ="post" enctype="multipart/form-data" 가 필요하다!

 

++) 파일 input 태그도 name이 필요하다!

728x90
반응형

댓글