📝 input 태그
웹 문서에서 사용자가 입력할 수 있는 양식을 제공하는 태그
📌 text 관련 input 태그
💡 type="text"
- 한 줄 짜리 문자열(텍스트)을 입력할 수 있는 입력 상자
- input 태그의 type 기본값으로 생략 가능
- inline 형식(모든 input 태그가 inline)
<input type="text">
<input>
✏️ text 관련 input 태그의 공용 속성
- size
입력 상자의 크기
- maxlength
입력받는 텍스트의 최대 길이
- placeholder
입력 상자에 작성될 내용을 설명
아이디 : <input type="text" size="15" maxlength="10" placeholder="아이디 입력">
- value
모든 input 태그의 type에서 사용 가능한 속성
-> input 태그에 들어갈 초기값을 지정
💡 type= "password"
비밀번호 입력 상자(입력되는 텍스트를 가려 줌)
비밀번호 : <input type="password">
- url, email, tel 단독 사용 시 type="text"와 똑같지만
form 태그 내부에 사용되면 입력된 값이 용도에 맞는 값인지 유효성 검사를 간단히 진행함
💡 type="url"
주소 입력 시 사용하는 입력 상자
홈페이지 : <input type="url" value="https://">
💡 type="email"
이메일 입력 시 사용하는 입력 상자
이메일 : <input type:"email" size="30">
💡 type="tel"
전화번호 입력 시 사용하는 입력 상자
전화번호 : <input type="tel" size="30" placeholder="'-' 기호 포함">
💡 type="search"
검색어 입력 시 사용하는 입력 상자
검색어 입력 : <input type="search" size="50">
📌 숫자 관련 input 태그
✏️ 숫자 관련 태그 공용 속성
- min
최소값
- max
최대값
- step
증가/감소 단계 지정
💡 type="number"
숫자만 입력할 수 있는 입력 상자
-> 브라우저에 따라 스핀박스가 표시되기도 함
점수 입력 : <input type="number" min="0" max="100" step="10" value="50">
💡 type="range"
슬라이드 바를 이용해서 숫자 지정(단독 사용X, JS와 함께 사용)
<input type="range" min="0" max="50" step="10">
📌 날짜/시간 관련 input 태그
💡 type="date / month / week / time / datetime-local"
<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>
📌 radio와 checkbox
여러 관련된 값을 묶어서 선택하는 경우에 사용하는 input type
-> 묶음으로 다루려는 input 태그들은 반드시 같은 name 속성 값을 가져야 한다!
✏️ name 속성
1) radio, checkbox뿐만 아니라 input 태그들 중
관련된 것들을 묶어서 부를 때 (묶음으로 다룰 때) 사용
2) 서버 쪽에 제출되는 input 태그 값의 이름을 지정 (form 태그와 같이 사용)
💡 type="radio"
<!-- 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">
💡 type="checkbox"
<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">
📌 기타 input 태그
💡 type="color"
💡 type="file"
💡 type="hidden"
type="color" : <input type="color"> <br>
type="file" : <input type="file"> <br>
type="hidden" : <input type="hidden" value="여기 값 있어요~~" id="hd1">
<!-- 화면 상에서 보이지는 않지만 존재하는 input 태그
-> 필요한 값이지만 화면에 보일 필요는 없음(ex. 회원 번호)
-->
📝 form 태그
div와 같은 영역(block 형식)
- 내부에 작성된 input 태그의 값을 서버로 전달하는 역할
📌 속성
💡 action
내부에 작성된 값을 전달할 서버 또는 페이지 주소를 작성
💡 method(방식)
서버로 데이터 전달하는 방식을 지정하는 속성
💡 name
form 태그의 이름을 지정하여 각각의 form 태그 구분(JS 사용)
💡 target
action에 지정된 주소를 새 탭/현재 탭 중 어디서 열지 지정
✏️ 예시 1
<form>
아이디 입력 : <input type="text" name="id">
</form>
<!--
주소?id=user01
? : 제출된 값을 나타내는 문자열의 시작 부분
id : input 태그 name 속성 값
user01 : input 태그에 입력한 값(value)
id=user01 : name 속성 값이 'id'인 input 태그에 작성된 값이 'user01'이다.
-->
✏️ 예시 2
<form action="08_하이퍼링크관련태그.html">
<!-- action : 제출할 서버 또는 페이지 주소
기본값 : 현재 페이지 주소 -->
이름 : <input type="text" name="inputName"> <br>
나이 : <input type="number" name="inputAge"> <br>
<!-- action 주소로 제출하는 버튼 -->
<button type="submit">제출</button>
</form>
✏️ 예시 3
<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 / legend
💡 fieldset
테두리를 만들어 그룹을 구분하는 영역
💡 legend
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 태그
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(기본값) / reset / button"
<!-- <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>
- 그냥 버튼 눌렀을 때
📌 textarea / select, option
💡 textarea
여러 줄을 입력하기 위한 입력 상자
<form action="08_하이퍼링크관련태그.html">
<!--
rows : 행의 개수
cols : 행의 개수
-->
<textarea rows="5" cols="70" style="resize:none;"
placeholder="placeholder도 가능합니다. 이렇게 쓰면 됩니다."
name="ta">텍스트 작성 중...
제목 :
내용 :
작성자 :
</textarea>
<button type="submit">제출하기</button>
</form>
💡 select, option 태그
- select 제출 시
- 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>
풀스택 개발자 기록집 📁