웹에서 사용자로부터 정보를 입력받기 위해서는 <input> 태그를 사용해야합니다. <input> 태그의 type 속성 값에 따라 입력받을 수 있는 요소들이 달라집니다. 예를들어, 텍스트를 입력받기 위해서는 text를 색상을 입력받기 위해서는 color 값을 사용합니다. <input>태그는 보통 <form> 태그와 함께 사용하며 <input> 태그를 사용해 입력받은 정보를 <form>태그를 통해 서버에 전송합니다. 그 외의 값들은 아래의 표를 참조해주시면 됩니다.
| 실습번호 | type 속성 | 설명 |
| 1 | text | 텍스트 |
| 2 | radio | 라디오 버튼 |
| 3 | checkbox | 2개 이상 선택 가능한 체크 박스 |
| 4 | color | 색상 표 |
| 5 | search | 검색 상자 |
| 6 | url | URL 주소 |
| 7 | tel | 전화번호 |
| 8 | 메일 | |
| 9 | password | 비밀번호 |
| 10 | date | 사용자 지역 기준 날짜(연, 월, 일) |
| 11 | month | 사용자 지역 기준 날짜(연, 월) |
| 12 | week | 사용자 지역 기준 날짜(연, 주) |
| 13 | time | 사용자 지역 기준 시간(시, 분, 초, 분할 초) |
| 14 | datetime | UTC 기준 시간(연, 월, 일, 시, 분, 초, 분할 초) |
| 15 | datetime-local | 사용자 지역 기준 시간(연, 월, 일, 시, 분, 초, 분할 초) |
| 16 | submit | 서버 전송 버튼 |
| 17 | reset | 리셋 버튼 |
| 18 | file | 첨부 파일 버튼 |
| 19 | image | 이미지 삽입 |
| 20 | number | 숫자 조절 화살표 |
| 21 | range | 숫자 조절 슬라이드 막대 |
| 22 | hidden | 사용자가 볼 수 없지만 서버에 넘겨지는 값 |
실제로 type 속성의 유형을 사용해보겠습니다.
(실습1) 텍스트 상자 - text
텍스트를 입력받기 위한 텍스트 상자를 사용하기 위해서는 text를 사용하면 됩니다. <input type="text"> 형태로 사용합니다. 텍스트 상자의 경우 size 속성을 사용해 텍스트 상자의 크기를 지정할 수 있고 maxlength 속성을 사용해 최대 입력받을 수 있는 텍스트의 수를 지정할 수 있습니다. size="5" maxlenghth="5"는 크기가 5이고 최대 5개의 텍스트를 입력받을 수 있는 텍스트 상자를 생성한다는 의미입니다. 그리고 value 속성을 사용해 텍스트를 입력받기 전에 기본적으로 입력되어 있는 텍스트를 지정할 수 있습니다. value 속성을 따로 설정하지 않은 기본값은 빈 텍스트 상자를 출력합니다.
| 속성 : text, url, tel, email | |
| size | 텍스트 상자 크기 |
| maxlength | 최대 입력받을 수 있는 텍스트 수 |
| value | 사용자 입력 전 기본으로 입력되어 있는 텍스트 |
<head></head>
<body>
<font size=4>실습1 : 텍스트 상자</font><br><br>
<label>Text1 <input type="text"></label><br>
<label>Text2 <input type="text" size="5" maxlength="5"></label><br>
<label>Text3 <input type="text" size="15" value="input text"></label><br>
</body>
(실습2) 라디오 버튼 - radio
라디오 버튼을 사용하기 위해서는 radio를 사용하면 됩니다. <input type="radio"> 형태로 사용합니다. 다만, 라디오 버튼을 사용할 때는 주의하셔야할 사항이 있습니다. 라디오 버튼의 여러 개의 선택지 중 하나만을 선택하게끔 하기 위해서는 name 속성을 같은 값으로 지정해주어야합니다. 만약, name 속성을 사용하지 않는다면 라디오 버튼의 선택지들이 다른 그룹으로 분류되어버립니다.
그리고 라디오 버튼을 사용할 때는 value 속성을 사용해 서버에 어떤 선택지가 선택되었는지를 알려주어야합니다. value="true"의 경우 서버에 true라는 값을 넘겨주게 됩니다. 사용자가 라디오 버튼의 선택지를 선택하기 전에 기본으로 선택되어 있는 값을 지정하고 싶다면 checked 속성을 사용하면 됩니다.
<head></head>
<body>
<font size=4>실습2 : 라디오 버튼</font><br><br>
<label>Radio option 1<input type="radio" value="true" checked="" name="group"></label><br>
<label>Radio option 2<input type="radio" value="false" name="group"></label><br>
</body>
(실습3) 체크박스 - checkbox
체크박스 사용하기 위해서는 checkbox를 사용하면 됩니다. <input type="checkbox"> 형태로 사용합니다. 여러 개의 체크박스를 사용하는 경우 name을 사용해 같은 그룹의 체크박스임을 알려줄 수 있습니다. 다만, 라디오 버튼과는 달리 필수사항은 아닙니다. 체크박스의 경우 value 속성을 사용해 서버에 어떤 선택지가 선택되었는지를 알려주어야합니다. value="one"의 경우 서버에 one이라는 값을 넘겨주게 됩니다. 사용자가 체크박스의 선택지를 선택하기 전에 기본으로 선택되어 있는 값을 지정하고 싶다면 checked 속성을 사용하면 됩니다.
<head></head>
<body>
<font size=4>실습3 : 체크 박스</font><br><br>
<label>Checked box 1<input type="checkbox" value="one"></label>
<label>Checked box 2<input type="checkbox" value="two" checked=""></label>
<label>Checked box 3<input type="checkbox" value="three"></label>
</body>
(실습4) 색상표 - color
색상표를 사용해 색을 선택하도록 하기위해서는 color를 사용하면 됩니다. <input type="color"> 형태로 사용합니다.
<head></head>
<body>
<font size=4>실습4 : 색상표</font><br><br>
<label>Color <input type="color"></label><br>
</body>
(실습5) : 검색 상자 - search
검색 상자를 사용하기 위해서는 search와 submit을 사용하면 됩니다. 먼저, <input type="search">을 사용해 검색 상자를 만들어주신 후 <input type="submit" value="">를 사용해 검색 버튼을 만들어주시면 됩니다. value의 큰따옴표 안에는 검색 버튼에 표시할 텍스트를 입력하시면 됩니다. 다만, 검색 상자의 경우 HTML5에서만 지원을 하기 때문에 검색 상자가 없다면 텍스트 상자를 사용해 검색 창을 만드셔야합니다.
<head></head>
<body>
<br><br>
<font size=4>실습5 : 검색 상자</font><br><br>
<input type="search"><input type="submit" value="Search">
</body>
(실습6) : URL 링크 - url
URL 링크는 url을 사용하면 됩니다. <input type="url"> 형태로 사용합니다. URL 링크의 경우 HTML5에서 새로 추가된 요소입니다. 텍스트 박스로부터 분화되었기 때문에 텍스트 박스와 사용방법이 같습니다.
| 속성 : text, url, tel, email | |
| size | 텍스트 상자 크기 |
| maxlength | 최대 입력받을 수 있는 텍스트 수 |
| value | 사용자 입력 전 기본으로 입력되어 있는 텍스트 |
<head></head>
<body>
<font size=4>실습6 : URL 링크</font><br><br>
<label>URL<input type="url"></label>
</body>
(실습7) : 전화번호 - tel
전화번호는 tel을 사용하면 됩니다. <input type="tel"> 형태로 사용합니다. 전화번호의 경우 텍스트 상자와 큰 차이는 없으나 서버에 정보를 넘겨줄 때 이 정보가 전화번호라는 것을 알려줄 수 있습니다. 텍스트 상자로부터 분화되었기 때문에 텍스트 상자와 사용방법이 같습니다.
| 속성 : text, url, tel, email | |
| size | 텍스트 상자 크기 |
| maxlength | 최대 입력받을 수 있는 텍스트 수 |
| value | 사용자 입력 전 기본으로 입력되어 있는 텍스트 |
<head></head>
<body>
<font size=4>실습7 : 전화번호</font><br><br>
<label>전화번호<input type="tel"></label>
</body>
(실습8) : 이메일 - email
이메일은 email을 사용하면 됩니다. <input type="email"> 형태로 사용합니다. 이메일의 경우 텍스트 상자와 큰 차이는 없지만 서버에 정보를 넘겨줄 때 이 정보가 이메일이라는 것을 알려줄 수 있습니다. 텍스트 상자로부터 분화되었기 때문에 텍스트 상자와 사용방법이 같습니다. 다만, 이메일은 HTML5에서만 지원하기 때문에 기존의 HTML에서는 텍스트 상자와 자바스크립트 함수를 사용해 이메일을 구분해야합니다.
| 속성 : text, url, tel, email | |
| size | 텍스트 상자 크기 |
| maxlength | 최대 입력받을 수 있는 텍스트 수 |
| value | 사용자 입력 전 기본으로 입력되어 있는 텍스트 |
<head></head>
<body>
<font size=4>실습8 : 이메일</font><br><br>
<label>이메일<input type="email"></label>
</body>
(실습9) : 비밀번호 - password
비밀번호는 password를 사용하면 됩니다. <input type="password"> 형태로 사용합니다. 비밀번호의 경우 텍스트 상자와 큰 차이는 없지만 사용자가 입력하는 내용이 ● 형태로 나타나 보이지 않는다는 차이가 있습니다. 텍스트 상자로부터 분화되었기 때문에 텍스트 상자와 value가 없다는 점을 제외하고는 사용방법이 같습니다.
| 속성 : password | |
| size | 텍스트 상자 크기 |
| maxlength | 최대 입력받을 수 있는 텍스트 수 |
<head></head>
<body>
<font size=4>실습9 : 비밀번호</font><br><br>
<label>비밀번호<input type="password"></label>
</body>
(실습10, 11, 12) : 날짜 - date(연, 월, 일) / month(연, 월) / week(연, 주)
날짜를 표시하는 방식에는 date, month, week 총 세가지가 있습니다. date는 연, 월, 일을 모두 표시하며 month는 연과 월만 표시합니다. week는 연과 주를 표시합니다. 세 가지 방식 중 원하는 방식을 골라 사용하시면 됩니다.
<head></head>
<body>
<font size=4>실습10 : 날짜(연, 월, 일)</font><br><br>
<input type="date">
<br><br>
<font size=4>실습11 : 날짜(연, 월)</font><br><br>
<input type="month">
<br><br>
<font size=4>실습12 : 날짜(연, 주)</font><br><br>
<input type="week">
</body>
(실습13) : 시간(시, 분, 초, 분할 초) - time
시간을 표시할 때는 time을 사용하면 됩니다.
<head></head>
<body>
<font size=4>실습13 : 시간(시, 분, 초, 분할 초)</font><br><br>
<input type="time">
</body>
(실습14, 15) : 날짜와 시간 - datetime / datetime-local
날짜와 시간을 한꺼번에 표시하는 방식에는 두가지가 있습니다. datetime과 datetime-local 둘 중 하나를 사용합니다. datetime은 UTC 기준 시간을 datetime-local은 사용자 지역 기준 시간을 표시합니다.
<head></head>
<body>
<font size=4>실습14 : UTC 기준 시간(연, 월, 일, 시, 분, 초, 분할 초)</font><br><br>
<input type="datetime">
<br><br>
<font size=4>실습15 : 사용자 지역 기준 시간(연, 월, 일, 시, 분, 초, 분할 초)</font><br><br>
<input type="datetime-local">
</body>
(실습16) : 서버 전송 버튼 - submit
서버 전송 버튼을 넣기 위해서는 submit을 사용합니다. submit은 보통 단독으로 쓰이기 보다는 이메일, 검색창 등과 같은 다른 input 요소들과 함께 사용합니다. 버튼의 경우 value 속성을 이용해 버튼에 표시될 텍스트를 지정할 수 있습니다. submit을 통해 전송된 정보는 form에 연결된 서버로 전송됩니다.
<head></head>
<body>
<font size=4>실습16 : 서버 전송 버튼</font><br><br>
<input type="submit" value="전송">
</body>
(실습17) : 리셋 버튼 - reset
리셋 버튼을 넣기 위해서는 reset을 사용합니다. reset은 보통 단독으로 쓰이기 보다는 이메일, 검색창 등과 같은 다른 input 요소들과 함께 사용합니다. 버튼의 경우 value 속성을 이용해 버튼에 표시될 텍스트를 지정할 수 있습니다. reset을 통해 form에 작성된 모든 내용을 지울 수 있습니다.
<head></head>
<body>
<font size=4>실습17 : 리셋 버튼</font><br><br>
<input type="reset" value="초기화">
</body>
(실습18) : 첨부 파일 버튼 - file
폼에 파일을 첨부하기 위해서는 file을 사용합니다. <input type="file"> 형태로 사용하며 처음에는 선택된 파일 없음으로 표시됩니다. 파일 선택을 눌러 파일을 선택하시면 파일이 폼에 첨부됩니다.
<head></head>
<body>
<font size=4>실습18 : 첨부 파일 버튼</font><br><br>
<input type="file">
</body>
(실습19) : 이미지 삽입 - image
이미지를 삽입하기 위해서는 image를 사용합니다. image를 사용할 때는 사전에 준비된 이미지의 위치를 알고 있어야합니다. <input type="image" src="" alt="" width="" height=""> 형태로 사용되며 src는 경로, alt는 오류가 발생했을 때 출력할 텍스트, width와 height는 각각 이미지의 가로, 세로 길이를 의미합니다. src는 반드시 입력해야되지만 나머지 속성은 생략하셔도 됩니다.
<head></head>
<body>
<font size=4>실습19 : 이미지 삽입</font><br><br>
<input type="image" src="example.jpg" alt="X" width="100px" height="50px">
</body>
(실습20) : 숫자 조절 화살표 - number
HTML5에서는 숫자를 입력할 때 직접 입력 방식이 아닌 화살표를 클릭해 숫자를 입력하는 방식도 가능합니다. 이 경우 number를 사용하면 됩니다. 이때, 숫자의 범위는 min과 max를 사용해 조절합니다.
<head></head>
<body>
<font size=4>실습20 : 숫자 조절 화살표</font><br><br>
<input type="number" min="1" max="3">
</body>
(실습21) : 숫자 조절 슬라이드 막대 - range
HTML5에서는 숫자를 입력할 때 직접 입력 방식이 아닌 슬라이드 막대를 조절해 숫자를 입력하는 방식도 가능합니다. 이 경우 range를 사용하면 됩니다. 숫자의 범위는 min과 max를 사용해 조절합니다.
<head></head>
<body>
<font size=4>실습21 : 숫자 조절 슬라이드 막대</font><br><br>
<input type="range" min="1" max="5">
</body>
(실습22) : 서버에 넘겨지는 숨겨진 값 - hidden
hidden은 굳이 사용자에게 보여줄 필요가 없지만 서버에는 넘어가야하는 값을 다룰 때 사용합니다. value 속성을 통해 넘겨지는 값을 지정하고 name을 통해 이름을 지정해 구분합니다.
<head></head>
<body>
<font size=4>실습22 : 서버에 넘겨지는 숨겨진 값</font><br><br>
<input type="hidden" name="one" value="one">
</body>
'Programming > HTML5 & CSS3' 카테고리의 다른 글
| [HTML] form - 글, 버튼 삽입하기 (0) | 2021.01.24 |
|---|---|
| [HTML] 드롭다운 목록 만드는 법 (0) | 2021.01.23 |
| [HTML] form 만드는 법 (0) | 2021.01.21 |
| [CSS] 리스트 스타일 - 가로 리스트 빈 공간 없이 배경색 채우기 (0) | 2020.12.22 |
| [CSS] 리스트 스타일 - 가로 리스트 만들기, 리스트 색 변경 (0) | 2020.12.21 |
