Web 2일차 1-1(입력양식)
2022. 12. 21. 09:50ㆍ코딩배움일지/Web 구현
폼 삽입하기
웹에서 만나는 폼
사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼(form)
폼과 관련된 대부분의 작업들은 정보를 저장하거나 검색하거나 수정하는 일들
이런 작업은 모두 데이터베이스를 기반으로 한다.
아이디를 입력하는 텍스트 필드나 버튼 같은 폼의 형태를 만드는 것은 HTML 태그
폼에 입력한 사용자 정보를 처리하는 것은 ASP나 PHP 같은 서버 프로그래밍 이용
method
get: 256 ~ 4096 byte 까지 서버로 넘길 수 있다.
post: 입력한 내용의 길이에 제한받니 않고 사용자가 입력한 내용도 드러나지 않는다.
<label> 태그
<input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용
레이블 하기 전
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
아이디: <input type="text"><br>
비밀번호: <input type="password">
</form>
</body>
</html>
레이블 한 후
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<label for="username"> 아이디: </label><input type="text" id="username"><br> <!-- label 에 클릭되더라도 input에 반응이 오도록 한다. -->
<label for="pw">비밀번호: </label><input type="password" id="pw"><br>
<input type="checkbox" id="chk1"><label for="chk1">축구</label>
<input type="checkbox" id="chk2"><label for="chk2">야구</label>
<input type="checkbox" id="chk3"><label for="chk3">족구</label>
<input type="checkbox" id="chk4"><label for="chk4">농구</label>
</form>
</body>
</html><!-- label 에 클릭되더라도 input에 반응이 오도록 한다. -->
id 한개만 연결 할 수 있다.
'코딩배움일지 > Web 구현' 카테고리의 다른 글
| Web 2일차 3(css) (0) | 2022.12.21 |
|---|---|
| Web 2일차 2-1(input 심화) (1) | 2022.12.21 |
| Web 2일차 1(태그) (0) | 2022.12.21 |
| Web 1일차 1-3() (0) | 2022.12.20 |
| Web 1일차 1-2( (0) | 2022.12.20 |