1. 한줄 입력과 선택
<form> 태그
- 입력 항목들을 하나로 묶어 서버로 보내기 위한 태그
<input> -사용자가 무언가 입력 할 수 있는 태그
<input type="text">
<input type="password">
<input type="file">
<input type="submit">
제출을 누르면 Servlet 으로 보낸다
name 이 없으므로 text로 쓰면 된다 .
묶어서 보내줘야할것을 form 안에 전부 묶어서 보내준다
action : 묶음을 보내는 서버주소
<label> - 입력항목에 뭘 입력하는지 항목 적어줌
<!-- label 안에 for 속성을 적으면 한글 출력된 부분을 눌러도 입력이 된다. -->
<div> 어떤 영역이다 하나의 입력 영역이다
<input type="text" id="id" value="아이디">
id에 value를 넣을경우
공간에 아이디입력이 된다 (value)
form
action => 적으면 method 기본값은 set이다
post로 입력하고싶으면 post로 입력하면 됨
method
-> Get 으로 지정해야하는 상황
=> 서버로 보낼 데이터에 개인 정보가 없을 경우
=> 서버로 보낼 데이터에 파일이 포함되지 않았을 경우
-> Post 지정해야하는 상황
=> 서버로 보낼 데이터에 개인 정보가 포함되어 있을 경우
=> 서버로 보낼 데이터에 파일이 포함되었을 경우
enctype
지정 안하면 기본값 application/x-www-form-urlencoded 이다
enctype application/x-www-form-urlencoded 로 지정해야되는 상황
=> 서버로 보낼 데이터에 파일이 포한되지 않았을 경우
enctype multipart/form-data 로 지정해야 되는 상황
=> 서버로 보낼 데이터에 파일이 포함되었을 경우
<input> 속성
value => 입력 요소의 기본값을 설정 < file 에는 안됨>
type = text, password 일때 value 입력시 설정됨
placeholder
<input type="text" id="id" value="홍길동">
<input type="text" id="id" placeholder="홍길동">
<input type="password" id="pw" placeholder="비밀번호를 입력하세요" >
placeholder => 가이드 여기에 이런걸 입력해라
name
name 속성없이 서버로 데이터를 보내면
서버가 해당되는 값을 쓸수없다.
input 사용시 type, id, placeholder, name 속성은 무조건 사용해야한다.
id / name 비슷한데 내용 달라도 된다.
id 는 레이블이랑 연결 name 은 서버랑 연결하기 위해서 두개 다른거임!
123
<button type="submit"></button>
<input type="submit" value="회원가입">
거의 유사함
겉으로 보이는것만 다름
<button type="submit">주소검색</button>..
type = "raido"
라디오버튼=> 여러 선택지 중 하나만 선택할 수 있게 해준는 태그
<!-- name이 같아야지 하나의 그룹으로 잡는다 -->
<input type="radio" name="gender" value="M" > 남성
<input type="radio" name="gender" value="F" > 여성
type = "checkbox"
체크박스버튼 => 여러선택지중 여러개를 선택할 수 있게 해주는 태그
<h3>성별</h3>
<label ><input type="radio" name="gender" value="M" > 남성 </label>
<label ><input type="radio" name="gender" value="F" > 여성 </label>
</div>
남성 여성 앞뒤로 label 태그 달았음 이러면 남성 글자를 눌러도 체크가 된다
<textarea>=> 여러 줄 입력할수있는 태그
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- name 이란 이름으로된걸 서버로 보낸다 cols 30자리입력너비 쓸수있는 rows 10줄(높이)-->
textarea는 css하기전에 임의적으로 마우스로 크기 조절가능
<select> => 드롭다운 목록태그
드롭다운 밑으로 펼쳐지는것
<option> => 드롭다운 목록태그 목록
서울을 클릭하면 value s가 name location에 들어가서 서버로 보내진다.
<select name="location" id="">
<option>거주지를 선택하세요.</option>
<option value="s">서울</option>
<option value="i">인천</option>
<option value="b">부산</option>
<option value="j">제주</option>
</select>
거주지를 선택하세요 -> 정보수정 눌러도 아무것도 안간다 vlue 가 없잖아
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>공지사항</h1>
<form action="">
<div>
<label for="notice_title">제목</label>
<select name="type" id="notice_type">
<option value="important">긴급 공지사항</option>
<option value="regular">정기 공지사항</option>
<option value="notice">안내 공지사항</option>
</select>
<input type="text" id="notice_title" name="notice_title">
</div>
<div>
<label for="">내용</label> <br>
<textarea name="notice_title" id="" cols="30" rows="10"></textarea>
</div>
<div>
<label for="file">첨부파일</label>
<input type="file" id="file" name="file">
</div>
<div>
<label for="">게시시점</label>
<input type="radio" name="time" value="now" checked> 즉시
<input type="radio" name="time" value="1hour"> 1시간 뒤
<input type="radio" name="time" value="2hour"> 2시간 뒤
<input type="radio" name="time" value="etc"> ...
</div>
<div>
<label for="">열람 권한</label>
<input type="checkbox" name="accessLevel " value="level1" checked> 열심 회원
<input type="checkbox" name="accessLevel " value="level2"> 꾸준 회원
</div>
<div>
<input type="submit" value="작성하기">
<input type="reset" value="다시쓰기">
</div>
</form>
</body>
</html>
============================================================
id 속성
=> 그 페이지 안에서 유일해야하는 값
- 같은 페이지 안에서 id를 사용할수없다.
- 태그 하나당 하나만 있어야한다
class 속성
=> 그 페이지 안에서 여러 태그가 같이 사용해도 됨
여러개 class를 넣어도 된다
<div id="area1" class="element header content">헤더</div>
<div id="area2" class="element main content" >메인</div>
element로 두개 묶어있고 header / main 따로 되어있고
content 두개 같있다.
