HTML_09_입력관련태그

송지윤·2024년 1월 12일

html tag 입력

HTML

목록 보기

9/10

input 태그

웹 문서에서 사용자가 입력할 수 있는 양식을 제공하는 태그

text 관련 input 태그

type="text"

한 줄 짜리 문자열(텍스트)을 입력할 수 있는 입력 상자
input 태그의 type의 기본값으로, 생략 가능
inline 형식 (모든 input 태그가 inline 형식)

<input>

<input type="text">

text 관련 input 태그의 공용 속성

size : 입력 상자 크기
maxlength : 입력 받는 텍스트의 최대 길이
placeholder : 입력 상자에 작성될 내용을 설명 (입력 상자에 흐리게 표시됨)

아이디 : <input type="text" size="15" maxlength="5" placeholder="아이디 입력">

type="password"

비밀 번호 입력 상자 (단순히 입력되는 텍스트를 가려줌)

비밀번호 : <input type="password">

type="url"

주소 입력 시 사용하는 입력 상자
value : 모든 input 태그의 type에서 사용 가능한 속성(
value="https://" -> https://를 초기값으로 설정

홈페이지 : <input type="url" value="https://">

url, email, tel 속성은 단독 사용 시 type="text"와 같지만 form 태그 내부에서 사용되면 입력된 값이 용도에 맞는 값인지 유효성 검사를 간단히 진행함.

type="email"

이메일 입력 시 사용하는 입력 상자

<form>
	이메일 : <input type="email">
	<button>제출</button>
</form>

type="tel"

전화번호 입력 시 사용하는 입력 상자

전화번호 : <input type="tel" placeholder="'-' 기호 포함">

숫자 관련 input 태그

숫자 관련 태그 공용 속성

min : 최소값
max : 최대값
step : 증가/감소 단계 지정

type="number"

숫자만 입력할 수 있는 입력상자
브라우저에 따라 스핀박스(위아래 화살표) 표시되기도 함.
step 속성 입력 전에는 화살표 누르면 1씩 증가 감소
min 입력 안하면 음수까지 표시됨

점수입력 : <input type="number" step="10" min="0" max="100">

type="range"

슬라이드 바를 이용해서 숫자 지정(단독 사용 X, js와 함께 사용)
단독 사용시 바만 움직임. 값을 알 수 없음

<input type="range" step="10" min="0" max="50">

눈에 보이지는 않지만 step,min,max 설정 해서 구간 5번으로 나눠서 움직임

날짜/시간 관련된 input 태그

크기 변경은 style="width: 130px;"

<input type="date">

<input type="month">

<input type="week">

<input type="time">

<input type="datetime-local">

radio와 checkbox

여러 관련된 값을 묶어서 선택하는 경우에 사용하는 input type

묶음으로 다루려는 input 태그들은 반드시 같은 name 속성 값을 가져야 한다

name 속성

radio, checkbox 뿐만 아니라 input 태그들 중
관련된 것들을 묶어서 부를 때 사용 (== 그룹 이름)
서버 쪽에 제출되는 input 태그 값의 이름 지정(form 태그와 같이 사용)

type="radio" 한개만 선택해야할 때

input 태그 앞에 글씨 쓰면 체크하는 부분이 뒤에 나옴
labal(for) 속성은 input(id) 태그와 연결 기능 글씨 눌러도 체크됨
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" 여러 개 체크 가능

취미선택
<input type="checkbox" name="hobby" id="baseball"> <label for="baseball">야구</label>
<input type="checkbox" name="hobby" id="soccer"> <label for="soccer">축구</label>
<input type="checkbox" name="hobby" id="basketball"> <label for="basketball">농구</label>

checked 속성 : checkbox / radio 체크해두는 속성

<input type="checkbox" checked>
<input type="radio" checked>

label 더 쉽게 연결하는 법

<label> 
	<input type="checkbox"> 뜨개질
</label>
<label>
	<input type="checkbox"> 바느질
</label>

기타 input 태그

type="color" : <input type="color">
type="file" : <input type="file">
type="hidden" : <input value="값이 있었는데 없었어요" type="hidden">

hidden은 개발자 도구에서만 보임 글자는 사라짐
(브라우저에는 안 보이고 서버에는 넘겨야하는 값)

form 태그

front(앞단)에서 back(뒷단)으로 넘겨줄 때 꼭 필요한 태그
앞단 : HTML, CSS, Javascript
뒷단 : DB, JAVA

div와 같은 영역 방식(block 형식)
내부에 작성된 input 태그의 값을 서버로 전달하는 역할

속성

action : 내부에 작성된 값을 전달할 서버 또는 페이지 주소를 작성
(input 박스에 글을 쓰면 value 값이 생긴 것과 같음
그 값이 login으로 들어가고 서버에서 기능 수행
name="홍길동")

<form action="/login">
	<input type="text" value="홍길동" name="name">
</form>

name : form 태그의 이름을 지정하여 form 태그 구분(JS 사용)
method(방식) : 서버로 데이터 전달하는 방식을 지정하는 속성

GET / POST 서버 전달 방식

GET요청 : 클라이언트(앞단)에서 값을 보낼 때 정보 요청하기 위해 사용 (get 보안 약함 위에 값이 뜸, 서버로 보낼 수 있긴함, 서버로 보낸값이 노출)

ex) 조회(서버에서 명단 보내줌)

POST : 앞단에서 값을 서버로 보내는 거

ex) 아이디, 비밀번호 입력

target : action에 지정된 주소를 현재 탭/ 새 탭 중 어디서 열지 지정

form 예시 1

<form>
	아이디 : <input type="text" name="id" value="user01">
	비밀번호 : <input type="password" name="pw">
	<button>제출</button>
</form>

주소창 뒤에 (?id=user01&pw=12345)
front에서 input 값에 작성한 게 서버로 넘어갔다는 뜻
? : 제출된 값을 나타내는 문자열의 시작부분
id, pw : input 태그 name 속성값
user01, 12345 : input 태그에 입력한 값(value)

?id=user01&pw=12345

name 속성 값이 'id'인 input 태그에 작성된 값 'user01' 과 name 속성 값이 'pw'인 input 태그에 작성된 값 '123453' 이다.

form 태그 기본값은 get 요청 (get은 생략 가능)

form 예시 2

<form action="07_이미지관련태그.html" target="_blank" method="get">
	<input type="checkbox" name="hobby" id="baseball"> <label for="baseball">야구</label>
	<input type="checkbox" name="hobby" id="soccer"> <label for="soccer">축구</label>
	<input type="checkbox" name="hobby" id="basketball"> <label for="basketball">농구</label>
         
	<button type="submit">제출</button>
</form>

button type 기본값 submit 속성 제출의 의미, 생략 가능
button type="button"은 제출 안됨 아무런 기능 없음 (javascript를 이용해서 원하는 기능을 추가할 수 있다.)
button type="reset" : 버튼이 포함된 form 태그 내부 input 값을 모두 초기화

스크립트 안에 작성된 내용은 자바스크립트 영역

<body>
<button type="button" id="btn">그냥 버튼</button>
	<script>
		document.getElementById("btn").addEventListener("click" , function() {
			// click 했을 때 어떤 기능을 수행할 지 작성
			alert("버튼 클릭됨"); //경고 기능
		})
            //그냥 버튼 가져온다는 뜻
	</script>
</body>

fieldset / legend

fieldset : 테두리를 만들어 그룹을 구분하는 영역
legend : fieldset 테두리에 이름을 붙이는 것

<form>
	<fieldset>
		<legend>로그인 정보</legend>
		아이디 : <input> <br>
		비밀번호 : <input type="password">
		
        <button>가입하기</button>
	</fieldset>
</form>

textarea 태그

여러 줄을 입력하기 위한 입력 상자 (상자 넓힐 수 있음)
5행 70열 resize: none; 넓히는 기능 막음

<textarea rows="5" cols="70" style="resize: none;" placeholder="최대 5000자"></textarea>

select 태그, option 태그

<form>
	<select name="test">
		<option value="1">선택 1</option>
		<option>선택 2</option>
		<option selected>선택 3</option>
        <option>선택 4</option>
		<option>선택 5</option>
	</select>

	<button>제출</button>
</form>

선택 1 선택하고 제출하면 value값이 들어감
option 태그에 value가 없으면 option태그 사이에 작성된 내용이 제출됨
selected 속성 기본값으로 3번 선택되게 만듦

송지윤

이전 포스트

HTML_08_하이퍼링크관련태그

다음 포스트