입력 양식용 태그, <form> <form> 태그 속성
method > 생략 가능 > default: GET 방식 요청 action > 생략 가능 > default: 현재 사용중인 URL로 전송 autocomplete > 예전에 입력했던 값들을 노출되지 않도록 하기 위함 enctype > default: application/x-www-form-urlencoded> 특수 문자일 경우 다른 문자로 인코딩 되어서 전송됨 (ex) @ → %40 > 파일을 보낼 경우엔 반드시 multipart/form-data 로 설정하여 인코딩 안 되고 그대로 전송!
<body>
<form autocomplete="off" method="get" enctype="application/x-www-form-urlencoded">
<input type="text" name="text" /><br />
<input type="password" name="password" /><br />
</form>
</body>type="text"
type="password"
<body>
<form>
<input type="checkbox" /> one
<input type="checkbox" /> two
<input type="checkbox" /> three <br />
<input type="radio" name="number" value="one" /> ONE
<input type="radio" name="number" value="two" /> TWO
<input type="radio" name="number" value="three" /> THREE
</form>
</body>type= "radio"
name 속성을 같게 단일 선택
<body>
<form>
<input type="hidden" name="hidden" value="hidden" /><br />
</form>
</body>type="hidden"
<body>
<form>
<input type="button" value="전송1" /><br />
<button>전송2</button> <!-- form 태그 내부의 button 태그는 type="submit"-->
<button type="submit">전송3</button>
</form>
</body>type="submit" value="타이틀"
value 안에는 text 밖에 못 씀, value값이 버튼의 타이틀!
<button>
default 기능은 submit 그냥 버튼을 만들 것이라면 type="button" 속성을 줘야함 사이에 이미지를 넣는다면 이미지 버튼이 만들어지는 것!
GET 방식으로 submit 했을 때 ?text=text&password=password&file=&hidden=hidden
text와 password는 빈값으로 submit해도 키 값은 넘어감.
?text=text&password=password&file=&number=one&hidden=hidden
checkbox와 radio 값은 체크하지 않는다면 전달 자체가 되지 않음. 체크 해야 value 값이 넘어옴!
<body>
<form>
<label for="name">이름</label>
<input id="name" type="text" />
</form>
</body><label>
라벨된 부분을 클릭하면 그곳으로 커서 이동 칸이 작아서 클릭을 잘 못하는 부분들을 보완!
<select>
<option>김밥</option>
<option>떡볶이</option>
</select>
<select multiple="multiple">
<option>김밥</option>
<option>떡볶이</option>
</select><select>
value가 지정되지 않았다면 태그 사이에 있는 내용이 value로 지정 default: 단일 선택 multiple: 다중 선택
form 형태 test=값1&test=값2&test=값3
json 형태 test: [값1, 값2, 값3] (form처럼 못하는 이유? key값이 중복되기 때문)
<body>
<textarea>
Textarea 태그
Textarea 태그
</textarea
>
</body>
<body>
<textarea>
Textarea 태그
Textarea 태그</textarea
>
</body><textarea>
엔터, 탭, 스페이스가 그대로 출력! 따라서 value가 될 내용들은 출력하고 싶은 모양 그대로 쓰면 됨
<input> 속성
placeholder: 안드로이드에서 hint와 같은 기능, 도움말! required disabled checked
속성명과 속성값이 같을 경우엔 속성명만 적어주면 돼
🧨 주의할 점! name 속성의 목적* 데이터를 전달하기 위함,즉 정보 전송! 🛬 id 속성의 목적* 문서에서 요소를 식별하기 위함 * 중복 x > name은 없고 id만 있을 경우엔 값을 입력해도 전송되지 않음.
