🥨 input 태그
- input태그는 대부분 form태그 내부에 배치하여 사용한다.
- input태그는 사용자 입력 편의성을 위해 type을 변경할 수 있다.
- type을 지정하지 않았을 때 기본type은 "text"로 지정된다.
- form태그의 action 속성은 입력값을 보낼 서버의 경로다.
- type이 submit으로 한 후 클릭하면 form 내부의 모든 input을 제출(전송)한다.
💡 type = "text"
일반적인 텍스트를 입력받는다
<input type="text" name="greeting" value="하이" placeholder="글자 입력">글자를 입력받는 type으로 value를 설정하면 자동으로 value에 적은 글자가 들어가져 있다. (변경 가능)
placeholder는 아무런 텍스트도 없을때 보여지는 글자다.
name은 나중에 이를 따로 사용할 수 있는 변수 이름이다.
바로 브라우저 연결했을 때
안에 글자를 지웠을 때
💡 type = "password"
마스킹된 텍스트를 입력받는다
<td><input type="password" placeholder="비밀번호 입력"></td>바로 브라우저 연결시
문자 입력시
위처럼 password type으로 지정하면 문자를 입력받았을 때 해당 내용이 가려져 보이지 않게된다.
💡 type = "number"
숫자를 입력받는다
<input type="number" placeholder="숫자 입력">
안에 숫자만 입력이 가능하다.
키보드로 입력할 수도 있고 사진처럼 오른쪽의 화살표를 이용하여 숫자를 입력할 수도 있다.
💡 type = "date"
날짜를 입력받는다
<p>
<input type="date">
</p>
<p>
<input type="datetime-local">
</p>
위의 일반적인 date는 날짜만 입력받고
아래의 datetime-local은 시간까지 입력받을 수 있다.
💡 type = "rnage"
마우스로 범위사이의 숫자를 입력받는다
<input type="range">
자세한 내용은 다음에 다시 게시글을 올리도록 하겠다...ㅠ
💡 type = "file"
사용자의 첨부파일을 입력받는다
<input type="file">
💡 type = "radio"
여러 요소 중 하나를 선택하여 입력받는다
<label><input type="radio" name="adult" value="true">성인</label>
<label><input type="radio" name="adult" value="false">미성년자</label>
여러개 중 하나를 선택하여 입력받는 type으로 하나만 선택해야 할 선택지들을 모두 같은 name으로 설정해주어야 한다. 아니면 중복선택이 가능해진다..ㅠ
같은 이름이지만 value를 다르게 함면서 전달할 값을 설정할 수 있다.
label로 묶는 이유는 다음과 같다.
label로 묶지 않았을 때에는 그림의 동그라미 체크버튼을 정확하게 눌러야만 선택이 된다. 하지만 묶었을 때는 체크버튼이 아닌 글자( 성인/미성년자 )를 클릭했을 때에도 선택이 된다.
편리하기 때문에 사용하는 것^^
💡 type = "checkbox"
여러 요소중 해당하는 값을 복수 선택하여 입력받는다
<label><input type="checkbox" name="pet_type" value="dog">강아지</label>
<label><input type="checkbox" name="pet_type" value="cat">고양이</label>
<label><input type="checkbox" name="pet_type" value="turtle">거북이</label>
위의 radio는 여러개 중 1개만 선택할 수 있지만
checkbox는 여러개의 값을 중복하여 선택할 수 있다.
이 또한 radio처럼 name은 모두 같도록 설정하고 value를 다르게 설정한다.
(마찬가지로 label로 묶으면 체크시 편하게 사용할 수 있다)
💡 type = "hidden"
이름과 값이 정해져 있으나, 시각적으로 보이지 않는다 (display: none)
<input type="hidden" name="csrf_token" value="abcdefghi">
브라우저에 아무것도 나타나지 않는다!
사용자에게 보여주고싶지 않을 때 사용한다.
💡 type = "color"
색상값을 입력받는다
<input type="color">
위 색상표를 눌러서 색상을 입력할 수 있다.
또는 스포이드를 이용하여 원하는 색상을 추출해낼 수도 있다!
💡 select & option
여러 선택지 중 하나를 입력받는다
<select name="lang">
<option value="">=== 언어를 선택하세요 ===</option>
<option value="korean">한글</option>
<option value="chinese">中文</option>
<option value="japanese">日本語</option>
</select>
radio와 비슷한 방식으로 여러 값중 하나의 값을 입력받는다.
select태그 안에 option태그를 넣어서 사용한다.
사진에서 화살표 버튼을 클릭하면 아래 옵션에 넣었던 내용들이 펼쳐지는 형식이다.
💡 textarea
여러 줄로 구성된 텍스트를 입력받는다
<textarea name="content" placeholder="내용을 입력하세요">하이하이~^^</textarea>브라우저를 바로 열었을 때
안에 내용을 지웠을 때
textarea태그 안에 아무런 글자를 넣지 않으면 빈 공간이 열리고
글자를 넣으면 처음에 글자가 넣어진채로 창이 열린다 (변경 가능)
또한 이 텍스트 공간의 너비와 높이를 따로 지정할 수도 있다.
<!--예시-->
<textarea name="content" placeholder="내용을 입력하세요" style="width: 200px;">하이하이~^^</textarea>
<!--너비를 200px로 변경-->