꼭 알아야하는 태그 2 : form태그
form 태그 :
사용자로부터 값을 입력받아 입력한 정보를 서버로 전송할때 사용
-로그인, 회원가입, 물건사기, 글 작성 등(글자를 입력하는 것들) 서버 전송 때 사용
<input> : 사용자가 입력한 정보를 서버에 전송하기 위해선 사용자로부터 정보를 입력받는 것을 만들어줘야 한다.
<p> : 단락표시 <p></p>
<submit> : 버튼을 누르면 우리가 입력한 정보가 서버로 전송된다.
전송할 때 사용하는 button이 submit이다.
입력태그 뒤에 name=""으로 이름을 부여해 구분해준다. 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>form 태그</h1>
<hr>
<form action="20_action.html"></form>
<!-- 입력태그 : input, select, textarea 등 - 1개 이상 -->
아이디 : <input type="text" name="id"><br>
비밀번호 : <input type="password" name="passwd"><br>
<!-- 요청 전송 기능(Submit Event)을 제공하는 태그 : input, buuton, img 등 - 1개 -->
<button type="submit">로그인</button>
</body>
</html>=> 사용자가 입력한 아이디, 비번이 주소값 url에 나타난다.
1) 문자입력
<value> => 텍스트필드 input에 기본값 입력하기
<textarea> => 텍스트 입력을 여러줄 할 수 있도록 만들어줌 (기본은 한 줄 입력)
- 크리 조절 속성 cols(컬럼/열) , rows(행) 예제
<html>
<body>
<form action="">
<p>text : <input type="text" name="id" value="default value"></p>
<p>textarea :
<textarea cols="50" rows="10"></textarea>
</p>
</form>
</body>
</html> => 50글자 입력만큼 폭이 커지고 10줄 입력할 수 있을 정도로 커진다
2) dropdown list
: 제한된공간만 여러개의 선택지를 선택할 수 있도록 함
- form안 select안 option 넣으면 콤보박스 생성
- option에 value 속성으로 보내질 때 이름 다르게 표현 가능함
- select에 multiple 속성을 추가하여 다중선택할 수 있음 - 이 경우 checkbox를 사용하는 게 낫다
<html>
<body>
<form action="http://localhost/color.php">
<h1>색상</h1>
<select name="color">
<option value="B">검은색</option>
<option value="R">빨간색</option>
<option value="RS">로즈쿼츠세레니티</option>
<input type="submit">
<h1>색상 다중선택</h1>
<select name="color multi" multiple>
<option value="B">검은색</option>
<option value="R">빨간색</option>
<option value="RS">로즈쿼츠세레니티</option> <input type="submit">
</form>
</body>
</html> 3) radio, checkbox
: raido는 동그라미, check하면 개구리알처럼 표시됨
checkbox는 네모 모양, check하면 v표시 생긴다
- name="", 이름(""안에 적히는)이 같은 항목으로 적히면 그 중 하나만 선택할 수 있다.
<html>
<body>
<form action="http://localhost/order.php">
<p>
붉은색 : <input type="radio" name="red">
검은색 : <input type="radio" name="black">
파란색 : <input type="radio" name="blue">
</p>
<p>
붉은색 : <input type="radio" name="color">
검은색 : <input type="radio" name="color">
파란색 : <input type="radio" name="color">
</p>
<p>
<h1>사이즈 다중선택</h1>
90 : <input type="checkbox" name="size" value="90">
95 : <input type="checkbox" name="size" value="95" checked>
100 : <input type="checkbox" name="size" value="100" checked>
</p>
<input type="submit">
</form>
</body>
</html> => 선택한 것이 주소값에 나옴
localhost/order.php?color=black&size=95&size=100
4) button
<input type="submit" values="전송">
-> 전송버튼 생성
<input type="button" values="버튼" onclick="alert(hello world)">
-> 자바스크립트에서 같이 사용할 때 씀. hello world 적힌 경고장 뜸 - 당장은 이해 못해도 당연, 이런게 있구나 하기
<input type="reset">
-> 사용자가 입력한 모든 정보가 초기화됨 5) hidden field
: UI가 필요하지 않은 경우 사용함. 눈에 보이는 UI가 없지만 서버로 값을 전송
<html>
<body>
<form action="localhost/hidden.php">
<input type="text" name="id">
<input type="hidden" name="hide" value="egoing">
<input type="submit">
</form>
</body>
</html> 6) label - input 사용
: html에서 권장하는 정리방법
- label for="이름"
-> 여기 label이 누구의 label인지 이름붙여 표시해줌
<html>
<body>
<form action="">
<p>
<label for="id_txt">text : </label>
<input id="id_txt" type="text" name="id" value="default value">
</p>
<p>
<label for="password">password : </label>
<input id="password" type="password" name="pwd" value="default value">
</p>
<p>
<label>textarea :
<textarea rows="2">default value</textarea>
</label>
</p>
<!--1번방법 : 체크박스를 선택해도 체크가 되고 글자를 선택해도 체크표시가 된다-->
<p>
<label>textarea :
<input type="checkbox" name="color" value="red">붉은색
</label>
<!--2번방법-->
<label for="color_blue">
<input id="color_blue" type="checkbox" name="color" value="blue">파란색
</label>
<!--1번, 2번방법은 표현방법이 다르지만 같다.-->
</p>
</form>
</body>
</html> 7) method 메소드* - get방식과 post방식
get 방식 : url로 데이터를 전송하는 방법 -> 사용자 입력값이 url에 나온다. - 기본적으로 get으로 설정되어 있음
post 방식 : 사용자 입력값을 감출 수 있다
<!-- => GET : 입력값을 URL 주소의 QueryString으로 전달 - 소용량의 보안이 필요없는 값 -->
<!-- => POST : 입력값을 리퀘스트 메세지의 바디(BODY)에 저장하여 전달 - 대용량 또는 보안이 필요한 값 -->- 언제 get을 사용하고 언제 post를 사용할까?
form을 이용해 데이터를 전송한다면 100% post를 사용하면 된다.
정보를 입력하면 get 방식은 정보가 주소값에 다 나온다
(아이디, 비밀번호 등 입력정보)
정보를 감추기 위해 post 방식을 사용한다.
<form action ="localhost/method.php" method = "post">=> localhost/method.php로만 주소가 나온다.
8) 파일 업로드
- 파일 업로드는 html보다 server, 파일을 전송받은 쪽에서 할일이 더 많아 수업이 피상적임
- html에서 어떻게 작성할지만 알아보기
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="localhost/upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="profile">
<!-- =>파일을 선택하는 UI를 만드는 것이 input태그다. 이것만 알아도 됨 -->
<input type="submit">
</form>
</body>
</html> 
배우는 초보개발자