웹 문서에서 사용자가 입력할 수 있는 양식을 제공하는 태그
<input type="text">
<input>
입력 상자의 크기
입력받는 텍스트의 최대 길이
입력 상자에 작성될 내용을 설명
아이디 : <input type="text" size="15" maxlength="10" placeholder="아이디 입력">
모든 input 태그의 type에서 사용 가능한 속성
-> input 태그에 들어갈 초기값을 지정
비밀번호 입력 상자(입력되는 텍스트를 가려 줌)
비밀번호 : <input type="password">
- url, email, tel 단독 사용 시 type="text"와 똑같지만
form 태그 내부에 사용되면 입력된 값이 용도에 맞는 값인지 유효성 검사를 간단히 진행함
주소 입력 시 사용하는 입력 상자
홈페이지 : <input type="url" value="https://">
이메일 입력 시 사용하는 입력 상자
이메일 : <input type:"email" size="30">
전화번호 입력 시 사용하는 입력 상자
전화번호 : <input type="tel" size="30" placeholder="'-' 기호 포함">
검색어 입력 시 사용하는 입력 상자
검색어 입력 : <input type="search" size="50">
최소값
최대값
증가/감소 단계 지정
숫자만 입력할 수 있는 입력 상자
-> 브라우저에 따라 스핀박스가 표시되기도 함
점수 입력 : <input type="number" min="0" max="100" step="10" value="50">
슬라이드 바를 이용해서 숫자 지정(단독 사용X, JS와 함께 사용)
<input type="range" min="0" max="50" step="10">
<ul>
<li><input type="date"></li>
<li><input type="month"></li>
<li><input type="week"></li>
<li><input type="time"></li>
<li><input type="datetime-local"></li>
</ul>
여러 관련된 값을 묶어서 선택하는 경우에 사용하는 input type
-> 묶음으로 다루려는 input 태그들은 반드시 같은 name 속성 값을 가져야 한다!
1) radio, checkbox뿐만 아니라 input 태그들 중
관련된 것들을 묶어서 부를 때 (묶음으로 다룰 때) 사용
2) 서버 쪽에 제출되는 input 태그 값의 이름을 지정 (form 태그와 같이 사용)
<!-- id 속성 : 식별자(하나의 HTML 문서에서 중복되면 안 됨) -->
팀 선택 <br>
<label for="a-team">A팀</label><input type="radio" name="team" id="a-team">
/
<label for="b-team">B팀</label><input type="radio" name="team" id="b-team">
/
<label for="c-team">C팀</label><input type="radio" name="team" id="c-team">
<h5>취미 선택</h5>
<label for="baseball">야구</label>
<input type="checkbox" id="baseball" name="hobby">
<label for="soccer">축구</label>
<input type="checkbox" id="soccer" name="hobby">
<label for="basketball">농구</label>
<input type="checkbox" id="basketball" name="hobby">
type="color" : <input type="color"> <br>
type="file" : <input type="file"> <br>
type="hidden" : <input type="hidden" value="여기 값 있어요~~" id="hd1">
<!-- 화면 상에서 보이지는 않지만 존재하는 input 태그
-> 필요한 값이지만 화면에 보일 필요는 없음(ex. 회원 번호)
-->
div와 같은 영역(block 형식)
내부에 작성된 값을 전달할 서버 또는 페이지 주소를 작성
서버로 데이터 전달하는 방식을 지정하는 속성
form 태그의 이름을 지정하여 각각의 form 태그 구분(JS 사용)
action에 지정된 주소를 새 탭/현재 탭 중 어디서 열지 지정
<form>
아이디 입력 : <input type="text" name="id">
</form>
<!--
주소?id=user01
? : 제출된 값을 나타내는 문자열의 시작 부분
id : input 태그 name 속성 값
user01 : input 태그에 입력한 값(value)
id=user01 : name 속성 값이 'id'인 input 태그에 작성된 값이 'user01'이다.
-->
<form action="08_하이퍼링크관련태그.html">
<!-- action : 제출할 서버 또는 페이지 주소
기본값 : 현재 페이지 주소 -->
이름 : <input type="text" name="inputName"> <br>
나이 : <input type="number" name="inputAge"> <br>
<!-- action 주소로 제출하는 버튼 -->
<button type="submit">제출</button>
</form>
<form action="07_이미지관련태그.html" target="_blank">
팀 선택 <br>
<label for="a-team">A팀</label><input type="radio" name="team" id="a-team" value="A">
/
<label for="b-team">B팀</label><input type="radio" name="team" id="b-team" value="B">
/
<label for="c-team">C팀</label><input type="radio" name="team" id="c-team" value="C">
<br><br><br>
<label for="baseball">야구</label>
<input type="checkbox" id="baseball" name="hobby" value="야구">
<label for="soccer">축구</label>
<input type="checkbox" id="soccer" name="hobby" value="축구">
<label for="basketball">농구</label>
<input type="checkbox" id="basketball" name="hobby" value="농구">
<button type="submit">제출</button>
</form>
<!-- radio, checkbox 선택 시 전달되는 값이 'on'으로 나오는 이유
-> 선택된 input 태그에 아무런 값이 작성되어 있지 않은데
체크는 되었다라는 것을 인식해서 'on'이라는 단어로 표현
* 해결 방법 : input 태그에 value 속성을 추가
-->
테두리를 만들어 그룹을 구분하는 영역
fieldset 테두리에 이름 부여
<form action="01_글자관련태그.html">
<fieldset>
<legend>회원 가입</legend>
아이디 : <input type="text" name="memberId"><br>
비밀번호 : <input type="password" name="memberPw"><br>
</fieldset>
<button type="submit">가입하기</button>
</form>
input 태그 중 type="submit" / type="reset" / type="button"
위 3개가 버튼을 나타내는 타입인데 최근에는 잘 사용되지 않음
-> 왜? 버튼의 사용도가 너무 많아져서 별도의 button 태그가 새롭게 등장함
<input type="text" name="1">
<input type="text" name="2">
<input type="text" name="3">
<input type="text" name="4">
<!-- <button type="submit">제출</button> -->
<button>제출</button>
<button type="reset">초기화</button>
<!-- reset 버튼이 포함된 form 태그 내부 input의 값을 모두 초기화 -->
<button type="button" id="btn">그냥 버튼</button>
<!-- 아무런 기본 기능이 없는 버튼
-> JS를 이용해서 원하는 기능을 추가할 수 있음
-->
<script>
// 자바스크립트 작성 영역
document.getElementById("btn").addEventListener("click", function(){
alert("버튼 클릭됨");
})
</script>
</form>
여러 줄을 입력하기 위한 입력 상자
<form action="08_하이퍼링크관련태그.html">
<!--
rows : 행의 개수
cols : 행의 개수
-->
<textarea rows="5" cols="70" style="resize:none;"
placeholder="placeholder도 가능합니다. 이렇게 쓰면 됩니다."
name="ta">텍스트 작성 중...
제목 :
내용 :
작성자 :
</textarea>
<button type="submit">제출하기</button>
</form>
- option 태그에 value가 없을 경우 : option 시작/종료 태그 사이에 작성된 내용
- option 태그에 value가 있을 경우 : value에 작성된 값
이 제출된다.
selected 속성 : select의 기본 값을 설정하는 속성
checked 속성 : checkbox/radio 체크해 두는 속성
<form action="07_이미지관련태그.html">
<select name="sel">
<option value="1">선택1</option>
<option value="2" selected>선택2</option>
<option value="3">선택3</option>
</select>
<br>
<input type="checkbox" checked>
<input type="radio" checked>
<!-- checked 속성 : checkbox/radio 체크해 두는 속성 -->
<br><br>
<button type="submit">제출하기</button>
</form>