9. HTML 이론 ( 정보, 데이터, 전달, input, type, label )

form tag 안에 채울

다양한 Field tag를 알아보도록 하자

​

첫 번째로는 input tag

사용자에게 정보나 데이터를 받을 때

가장 기본적으로 사용되는

field tag 중 하나이다.

​

input tag를 사용할 때는

반드시 사용해야 할 attr이 있다면

<input type="?" />

type="?" 이다.

​

사용자한테 받고 싶은 정보나 데이터 중에

숫자만 받고 싶을 때가 있을 수 있고

어쩔 땐 글자를 받고 싶을 때도 있고

여러 가지가 있다.

​

input의 attr에 대해 좀 더 배워보자.

​

placeholder="원하는 문구"를 사용하면

사용자가 아무것도 입력하지 않았을 때

원하는 문구를 보여줄 수 있다.

​

이때 사용자가

해당 input에 text를 넣기 시작하면

placeholder 값이 사라진다.

<input type="text" placeholder="이름">

<input type="text" placeholder="이름" value="html"> 
//두번째의 경우 value 값 html을 다 지우기 전까지는 placeholder가 나타나지않는다.

 

글자 수 제한을 두 길 원한다면

minlength="숫자" 또는

maxlength="숫자" 를 사용하여

제한을 걸 수 있다.

 

<input type="password" placeholder="비밀번호를 입력해주세요" minlength="4" maxlength="15" required>

 

만약 중요하게

반드시 작성해야 할

input 데이터가 있다면

attr required 를 이용하여

작성해야만 submit 할 수 있도록

제약을 걸 수 있다.

​

또 어느 경우에는

input 값을 받고 싶지 않을 때

제한을 걸 수 있는 방법은

attr 으로 disabled을 사용하여

focus를 잡지 못하게 할 수 있다.

​

text를 작성하지 않고

선택형 체크 type 두 가지 있는데

첫째는 type="radio"

두 번째는 type="checkbox"이다.

​

radio와 checkbox의 차이점은

radio는 둥근 상자

checkbox는 네모 상자인 것도 있지만

radio는

보기 중 하나만 선택할 때 사용하고

checkbox는

다중 선택 기능을 원할 때 사용한다.

​

하지만 radio를 사용할 때

보기 중 하나만 선택하는 형태로 만들려면

중요한 문법이 있는데

name이라는 atrr을 사용하여

우리는 같은 보기 중 하나야라고 작성해야 한다.

​

작성 방법은 name으로 같은 값을

입력해 주면 된다.

​

마지막으로

value를 작성해 줘야 한다.

​

submit을 했을 때

서버는 value에 값을 전달받기 때문에

필수사항이다.

(checkbox도 같다)

 

<input type="radio" id="age1" name="age" value="30">
<label for="age1">0 - 30</label>
<input type="radio" id="age2" name="age" value="50">
<label for="age2">30 - 50</label>
<input type="radio" id="age3" name="age" value="70">
<label for="age3">50 - 70</label> 
<input type="radio" id="age4" name="age" value="100">
<label for="age4">70 - 100</label>

두 번째 field tag로

label tag가 있다.

​

label tag는

무조건 써야 하는 tag는 아니지만

input tag만 사용하면

빈 박스만 나오기 때문에

허전해진다.

​

그러므로 해당 input 마다

제목이나 이름을 붙여줄 때 사용한다.

​

label tag attr for을 사용하여

연결하고자 하는

input의 id 값을 작성한다.

(#을 빼고 사용해야 한다.)

 

<label for="해당 input의 id값을 작성(#을 붙이지 않는다)">아이디 : </label>
<input type="text" id="label에 전달할 id값 작성">

 

그 외 여러 가지 type들

 

<input type="button" value="Click me" onclick="msg()">
//버튼 button type="submit"으로도 많이 쓴다고 한다.

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label> 
//네모 체크박스

<input type="radio" id="age1" name="age" value="30">
<label for="age1">0 - 30</label> 
//동그란 체크 박스 ( 네모 체크박스와 다르게 다중 선택이 불가능하다 )

<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
//컬러 선택 박스 //기본값은 #000000 (검은색)입니다.

<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
//캘린더

<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
//캘린더 + 시간

<label for="emails">Enter email addresses:</label>
<input type="email" id="emails" name="emails" multiple> 
//이메일 @ 체크용

<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile" accept=".png, .jpg">
//파일 등록 ( accept를 이용하여 원하는 파일 확장자만 등록 할 수 있다 )

<input type="hidden" id="custId" name="custId" value="3487">
//보이지 않고 사용자 몰래 값을 넘겨줄때 사용하기도 한다

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
//이미지를 누르면 submit한다.

<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
//캘린더 년도와 월 선택

<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5"> 
//숫자

<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" minlength="8">
//비밀번호

<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
//볼륨에 많이 사용되는? 길이 조절 바?

<input type="reset" value="Reset">
//초기화 버튼

<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
//검색용

<input type="submit" value="Submit">
//양식 제출을 위한 버튼

<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required>
//전화번호

<label for="fname">First name: </label>
<input type="text" id="fname" name="fname">
//텍스트 (기본값)

<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
//시간

<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
//url 주소 작성

<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
//년, 주 캘린더

 

참조

https://www.w3schools.com/tags/att_input_type.asp