input 태그
: 웹 문서에서 사용자가 입력할 수 있는 양식을 제공하는 태그
text 관련 input 태그
type="text"
-> 한 줄 짜리 문자열(텍스트)를 입력할 수 있는 입력 상자
- input 태그의 type 기본값으로 생락 가능-
- inline형식(모든 input 태그가 inline)
text 관련 input 태그의 공용 속성
- size : 입력 상자의 크기
- maxlength : 입력 받는 텍스트의 최대 길이
- placeholder : 입력 상자에 작성될 내용을 설명
아이디 : <input type="text" size="15" maxlength="10" placeholder="아이디 입력">
type="password"
-> 비밀번호 입력상자(입력되는 텍스트를 가려줌)
비밀번호 : <input type="password">
type="url"
-> 주소 입력 시 사용하는 입력상자
홈페이지 : <input type="url" value="http://">
type="tel"
-> 전화번호 입력 시 사용하는 입력상자
type="email"
-> 이메일 입력 시 사용하는 입력상자
숫자 관련 태그 공용 속성
- min : 최소값
- max : 최대값
- step : 증가/감소 단계 지정
type="number
-> 숫자만 입력할 수 있는 입력 상자
-> 브라우저에 따라 스핀박스가 표시되기도 함
정수 입력 : <input type="number" min="0" max="100" step="10" value="50">
화살표를 누르면 10씩 변경 됨 기본값은 50
type="range"
-> 슬라이드 바를 이용해서 숫자 지정 (단독 사용X, JS와 함께 사용)
<input type="range" min="0" max="50" step="10">
10단위로 끊기면서 움직임 step="10"을 삭제하면 부드럽게 움직임
날짜/시간 관련 input 태그
<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime-local">
radio와 checkbox
: 여러 관련된 값을 묶어서 선택하는 경우에 사용하는 input type
: 묶음으로 다룰려는 input 태그들은 반드시 같은 name 속성 값을 가져야 한다!
name 속성
1) radio, checkbox 뿐만 아니라 input 태그들 중 관련된 것들을 묶어서 부를 때 (묶음으로 다룰 때) 사용(== 그룹 이름)
2) 서버쪽에 제출되는 input 태그 값의 이름을 지정 (from 태그와 같이 사용)
type="radio"
<label>A팀</label> <input type="radio" name="team" id="a-team">
<label>B팀</label> <input type="radio" name="team" id="b-team">
<label>C팀</label> <input type="radio" name="team" id="c-team">
type="checkbox"
<label for="baseball">야구</label> <input type="checkbox" name="hobby" id="baseball">
<label for="soccor">축구</label> <input type="checkbox" name="hobby" id="soccor">
<label for="basketball">농구</label> <input type="checkbox" name="hobby" id="basketball">
for="baseball" 을 작성하면 문자인 '야구' 를 선택해도 체크박스에 표시가 된다
기타 input 태그
type="color"
<input type="color">
type="file"
<input type="file">
type="hidden"
<input type="hidden" value="값이 있었는데 없었어요"><br>숨겨진 입력 필드
: 폼 제출 시에 사용자가 변경해서는 안되는 데이터를 함께 보낼 때 유용하게 사용
form 태그
: div와 같은 영역(block 형식)
: 내부에 작성된 input 태그의 값을 서버로 전달하는 역할
[속성]
1) action : 내부에 작성된 값을 전달할 서버 또는 페이지 주소를 작성
2) method(방식) : 서버로 데이터 전달하는 방식을 지하는 속성
3) name : form 태그의 이름을 지정하여 각각의 form 태그 구분(JS 사용)
4) target : action에 지정된 주소를 현재탭/새탭 중 어디서 열지 지정
ex 1
아이디 입력 : <input type="text" name="id">이곳에 user01 이라는 아이디를 입력하게 되면
주소창이 이렇게 변함주소?id=user01
? : 제출된 값을 나타내는 문자열의 시작 부분
id : input 태그 name 속성 값
user01 : input 태그에 입력한 값(value)
id=user01 : name 속성 값이 'id'인 intput 태그에 작성된 값 'user01'이다
ex2
<form action="08_하이퍼링크관련태그.html">
<!-- action : 제출할 서버 또는 페이지 주소
기본값 : 현재 페이지 주소 -->
이름 : <input type="text" name="inputName"><br>
나이 : <input type="number" name=""inputAge"><br>
<button type="submit">제출</button>
==> 이름과 나이를 입력하고 제출을 누르면 action에 설정 해 둔 페이지 주소로 이동한다버튼을 나타내는 input 태그
: input 태그 중
type="submit" / type="reset" / type="button"
위 3가 버튼을 나타내는 타입, 최근 사용되지 않고 있음
-> 왜? 버튼의 사용도가 너무 많아져서 별도의 botton 태그가 새롭게 등장함
<button type="submit"> 제출 </button>
<button type="reset">초기화</button>
<button type="button" id="btn">그냥 버튼</button>
=> 아무런 기본 기능이 없는 버튼 JS를 이용해서 원하는 기능을 추가 할 수 있다fieldset / legend
fieldset : 테두리를 만들어 그룹을 구분하는 영역
legend : fieldset 테두리에 이름을 부여
<fieldset>
<legend>회원가입</legend>
아이디 : <input type="text" name="numberId"><br>
비밀번호 : <input type="password" name="memberPw"><br>
<button type="submit">가입하기</button>
</fieldset>
textarea / select, option
textarea 태그 : 여러줄을 입력하기 위한 입력상자
<form action="08_하이퍼링크관련태그.html">
<textarea rows="5" cols="70" style="resize:none;"
placeholder="placeholer도 작성 가능합니다."> 텍스트 작성 중...
제목:
내용:
작성자:
</textarea>
</form>
select 태그, option 태그
<form>
<select>
<option value="1">선택 1</option>
<option value="2">선택 2</option>
<option value="3" selected>선택 3</option>
<option value="4">선택 4</option>
<option value="5">선택 5</option>
</select>
</form>
selected를 통해 기본 설정값은 선택3select 제출 시 option 태그에 value가 있으면 : value 속성안에 작성된 값이 제출됨 option 태그에 value가 없으면 : <option></option> 사이에 작성된 내용이 제출됨
selected 속성 : select의 기본 값을 설정하는 속성
-> checkbox / radio도 기본값 설정 가능
