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이 필요하다!
'HTML > 생활코딩' 카테고리의 다른 글
[HTML기초] 모바일 지원(viewport)/외부문서 삽입(iframe)/ HTML5의 입력양식 (0) | 2021.11.14 |
---|---|
[HTML기초] 정보로서 HTML - 글꼴/meta/의미론적 태그/검색엔진 최적화 (0) | 2021.11.13 |
[HTML 기초] 입력양식 - form (2) 콤보박스/체크박스/radio/버튼/hidden (0) | 2021.11.10 |
[HTML기초] 입력양식 - form (0) | 2021.11.05 |
[HTML 기초] table (0) | 2021.11.03 |
댓글