🟣 form 태그
폼 양식을 의미하는 태그
HTML의 폼을 구성하는 태그는 모두 from태그 안에 작성함
- from 태그의 문법
<form action = "서버 URL" method = "GET 또는 POST"> </from>-
action 속성
폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL 주소를 넣는다. -
method 속성
입력받은 값을 서버에 전송할 때 송신 방식을 넣는다.GET : 보안이 요구되지 않은 정보. 사용자의 입력 데이터를 URL에 표시. 데이터 크기에 제한이 있고 쿼리 형식. 주소 줄 ? 뒤에 데이터가 붙여져서 전달되는 방식.
POST : 보안이 요구되는 정보. 데이터 크기의 제한이 없어 많은 양의 데이터를 전달 할 수 있음. HTTP REquest 헤더 안에 데이터가 숨겨져서 전송되는 방식.
-
input태그를 사용해서 아이디와 비밀번호를 입력하는 공간을 만들어 작성을 하고sumbit버튼을 누르면 action 속성에 입력된input.html로 전송되게 임시로 작성하였다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> form 태그 사용하기 </title>
</head>
<body>
<form action="input.html" method="get">
<!-- GET 메소드를 이용하여 입력양식을 만든다 -->
아이디 : <input type="text" name="id">
<!-- 사용자가 아이디를 입력할 수 있는 공간을 만드는 태그 -->
비밀번호 : <input type="password">
<!-- 사용자가 비밀번호를 입력할 수 있는 공간을 만드는 태그 -->
<input type="submit" value="로그인">
<!-- 제출 버튼을 만드는 태그 -->
</form>
</body>
</html>
- 그러면 출력된 웹 페이지엔 처음에 아이디와 비밀번호를 입력하는 태그가 출력이 된다.
- 로그인 버튼을 누르게 되면 action 속성에 입력된
input.html에 로그인 성공 ! 이라는 텍스트가 나오게 코드를 작성해두었다.
<!-- input.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 확인을 위한 임시 서버 URL</title>
</head>
<body>
로그인 성공 !
</body>
</html>🔽 로그인 버튼을 누르면 나오는 웹 페이지 🔽
🟣 input 태그
로그인 페이지의 아이디와 비밀번호처럼 입력받는 요소를 생성할 때 사용
- input 태그의 문법
<input type = "종류" name = "이름" value = "초기값">- type 속성
입력된 값에 따라 상호작용 요소의 종류를 결정
🔽 input 태그로 생성할 수 있는 입력 요소와 type 속성값 🔽
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> input 태그의 type </title>
</head>
<body>
<input type="text"> <br>
<input type="password"> <br>
<input type="tel"> <br>
<input type="number"> <br>
<input type="url"> <br>
<input type="search"> <br>
<input type="email"> <br>
<input type="checkbox"> <br>
<input type="radio"> <br>
<input type="file"> <br>
<input type="button"> <br>
<input type="image" src="images/images2/lovedog.jpg" width="100px" height="100px"> <br>
<input type="hidden"> <br>
<input type="date"> <br>
<input type="datetime-local"> <br>
<input type="month"> <br>
<input type="week"> <br>
<input type="time"> <br>
<input type="range"> <br>
</body>
</html>🔽 type 속성값을 적용 후 출력 🔽
-
name 속성
입력 요소의 이름을 작성
입력 요소가 form 태그에 의해 서버로 전송될 때, name 속성에 적힌 값이 이름으로 지정됨
서버에서는 지정된 이름으로 입력 요소를 식별할 수 있음 -
value 속성
입력 요소의 초기값을 작성
입력 요소는 보통 사용자에게서 수동으로 값을 입력받지만, 상황에 따라 초기값을 설정해야하는 경우가 있는데 이럴 때 사용하는 속성임.
🟣 label 태그
form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용
label 태그만 클릭해도 연결된 양식에 입력할 수 있도록 하거나, 체크 또는 체크를 해제할 수 있음.
- label 태그의 암묵적인 방법으로 코드 작성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> label 태그 </title>
</head>
<body>
<label> 아이디 입력
<input type="text">
</label>
</body>
</html>🔽 위 코드를 실행해보면 이렇게 아이디 입력란이 나오는데 아이디 입력을 누르면 입력할 수 있도록 한다 🔽
- label 태그의 명시적인 방법으로 코드 작성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> label 태그 </title>
</head>
<body> <!-- label for의 속성값과 input id속성값이 같아야한다 -->
<label for = "useid"> 아이디 입력 </label>
<input type="text" id = "useid">
</body>
</html>🟣 fieldset 와 legend 태그
form 태그 안에 사용된 상호작용 요소도 fieldset태그를 사용해 그룹 지을 수 있음
fieldset태그로 그룹을 지으면 그룹별로 박스 모양의 테두리가 생김
그룹 지은 요소들은 legend태그로 이름을 붙일 수 있음
- fieldset 와 legend 태그를 사용한 코드 작성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#" method="get">
<fieldset>
<legend> 그룹 이름 </legend>
<label> 아이디
<input type = "text">
</label>
<label> 비밀번호
<input type = "password">
</label>
</fieldset>
</form>
</body>
</html>🔽 fieldset 와 legend 태그를 사용해 출력 🔽
🟣 select, option, optgroup 태그
select 태그는 콤보박스를 생성
콩보박스에 항목 하나를 추가할 땐 option 태그 사용
항목들을 묶고 싶을 때는 optgroup 태그를 사용
- select, option, optgroup 태그를 사용한 코드 작성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> select 태그 사용하기 </title>
</head>
<body>
<select>
<optgroup label="지역 이름">
<option value="울산"> 울산 </option>
<option value="부산"> 부산 </option>
<option value="대구"> 대구 </option>
<option value="경주"> 경주 </option>
<option value="포항"> 포항 </option>
</optgroup>
<optgroup label="구 이름">
<option value="북구"> 북구 </option>
<option value="남구"> 남구 </option>
<option value="동구"> 동구 </option>
<option value="없음"> 없음 </option>
</optgroup>
</select>
</body>
</html>option태그는 서버에 전송할 값을 value 속성으로 지정할 수 있음
속성을 생략하면option태그의 콘텐츠로 적은 텍스트가 값으로 전송됨
optgroup태그로 항목을 그룹 지을 때 반드시label속성으로 그룹명을 지정해야 함
🔽 select, option, optgroup 태그를 사용해 출력 🔽
- size 속성
콤보박스에서 화면에 노출되는 항목 개수를 지정하는 속성
속성값으로 숫자를 적으면 됨. 생략할 경우 기본으로 1개 항목이 표시 됨.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> select 태그 사용하기 </title>
</head>
<body>
<select size="3">
<optgroup label="지역 이름">
<option value="울산"> 울산 </option>
<option value="부산"> 부산 </option>
<option value="대구"> 대구 </option>
<option value="경주"> 경주 </option>
<option value="포항"> 포항 </option>
</optgroup>
</select>
</body>
</html>🔽 select 태그에 size 속성을 사용해 출력 🔽
- multiple 속성
select 태그로 생성하는 콤보박스는 기본으로 1개 항목만 선택 가능하지만,multiple속성을 사용하면 여러 항목을 동시에 선택 할 수 있음 (콤보박스에서 항목 하나를 선택한 상태로 Ctrl을 누르고 다른 항목을 클릭하면 됨)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> select 태그 사용하기 </title>
</head>
<body>
<select multiple>
<optgroup label="지역 이름">
<option value="울산"> 울산 </option>
<option value="부산"> 부산 </option>
<option value="대구"> 대구 </option>
<option value="경주"> 경주 </option>
<option value="포항"> 포항 </option>
</optgroup>
</select>
</body>
</html>🔽 select 태그에 multiple 속성을 사용해 출력 🔽
- selected 속성
콤보박스는 첫 번째 option 태그의 값이 기본 선택된 상태로 표시되는데,selected속성을 사용하면 기본 선택 항목을 변경할 수 있음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> select 태그 사용하기 </title>
</head>
<body>
<select>
<option value="울산"> 울산 </option>
<option value="부산"> 부산 </option>
<option value="대구" selected> 대구 </option> <!-- 대구에 selected 속성을 사용 -->
<option value="경주"> 경주 </option>
<option value="포항"> 포항 </option>
</select>
</body>
</html>🔽 option 태그에 selected 속성을 사용해 출력 🔽
🟣 button 태그
input 태그에서 type 속성값을 sumbit, reset, button 으로 지정해 생성할 수 있지만, 별도의 button 태그로 생성할 수 있음
- button 태그의 문법
<button type = "종류"> 버튼 이름 </button>type의 속성값은 폼을 서버에 전송할 목적이면 sumbit
상호작용 요소에 입력된 내용을 초기화하는 버튼이면 reset
단순한 버튼이면 button
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> button 태그 사용하기 </title>
</head>
<body>
<button type = "submit">
<img src = "images/images2/lovedog2.jpg" width="100px" height="100px">
버튼 누르기
</button>
</body>
</html>🔽 button 태그 사용 출력 🔽
- input 태그의 button과 button 태그의 다른 점
button 태그는 input 태그로 생성할 수 있는 버튼 요소의 역할을 대신하기 위해 만들어진 태그
input 태그보다 나중에 등장했다. button 태그도 input 태그로 생성하는 버튼 요소처럼 type 속성이 있어서 최신 HTML에서는 버튼 요소를 생성할 때 더 이상 input 태그를 사용할 필요가 없다.
button 태그는 시작 태그와 종료 태그가 있어서 콘텐츠를 작성할 수 있다.
또한, 단순한 텍스트 외에도 이미지, 태그 같은 것들을 포함할 수 있어서 버튼 요소 꾸미기가 더 수월하다.
🟣 폼 관련 태그에서 사용할 수 있는 추가 속성
- disabled 속성
상호작용 요소를 비활성화 함. form태그로 서버에 값을 전송 안됨.
input,textarea,select,button태그에 사용 가능
비활성화 되면 입력 요소는 텍스트를 입력하지 못하고, 목록 상자는 항목을 선택할 수 없고, 버튼은 클릭할 수 없음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> disabled 속성 </title>
</head>
<body>
<input type = "text" disabled>
<textarea disabled></textarea>
<select disabled>
<option value="강아지"> 강아지 </option>
<option value="고양이"> 고양이 </option>
</select>
<button disabled> 버튼 비활성화 </button>
</body>
</html>🔽 disabled 속성 사용해서 출력하기 🔽
- readonly 속성
상호작용 요소를 읽기 전용으로 변경. form 태그로 서버에 값을 전송됨.
입력 요소에 텍스트를 입력하지는 못하지만, 요소를 선택하거나 드래그해서 내용을 복사할 순 있음
textarea,input태그에서 사용 가능
input태그에서는 type 속성값이 텍스트를 입력하는 요소의 속성값일 때만 사용 가능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> readonly 속성 </title>
</head>
<body>
<textarea readonly></textarea>
<input type = "text" readonly>
</body>
</html>🔽 readonly 속성 사용해서 출력하기 🔽
- maxlength 속성
입력할 수 있는 글자 수를 제한함
속성값으로는 숫자를 입력. 텍스트 입력이 가능한 요소의 태그와 type만 사용 가능.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> maxlength 속성 </title>
</head>
<body>
<textarea maxlength = "10"></textarea>
<input type = "tel" maxlength="5">
</body>
</html>🔽 maxlength 속성 사용해서 출력하기 🔽
- 위에 출력된 텍스트 입력 요소에 입력을 해보면 textarea는 10글자 이상 입력이 안되고, input type의 tel속성은 5글자 이상 입력이 안되는걸 알 수 있음.
- checked 속성
요소를 선택된 상태로 표시
선택 요소가 있어야 하므로 input 태그의 type 속성값이 checkbox나 radio인 요소에만 사용 가능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> checked 속성 </title>
</head>
<body>
<fieldset>
<legend> 먹고 싶은 메뉴 </legend>
<label> <input type="checkbox" name="chicken" checked> 치킨 </label>
<label> <input type="checkbox" name="pizza"> 피자 </label>
<label> <input type="checkbox" name="meat"> 고기 </label>
</fieldset>
</body>
</html>🔽 checked 속성 사용해서 출력하기 🔽
- placeholder 속성
입력 요소에 어떠한 값을 입력하면 되는지 힌트를 적는 용도
<input type="text" placeholder="힌트를 적는 곳">- placeholder 속성을 사용한 코드 작성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> placeholder 속성 </title>
</head>
<body>
<fieldset>
<legend> 먹고 싶은 메뉴 </legend>
<label> <input type="checkbox" name="chicken" checked> 치킨 </label>
<label> <input type="checkbox" name="pizza"> 피자 </label>
<label> <input type="checkbox" name="meat"> 고기 </label> <br>
<label> <input type = "text" placeholder = "다른 메뉴는 작성해주세요"> </label>
</fieldset>
</body>
</html>🔽 checked 속성 사용해서 출력하기 🔽
공부 중. !!! !