html input 타입중에 button에 대한, 지난번 포스팅에 이어서 이번 포스팅에서는, 나머지 input 타입에 대해서 알아보도록 하겠습니다.
html태그 중에서 사용자로부터 정보를 입력받고, 어떠한 기능들을 담고 있는 input태그의 type들은 아래와 같습니다.
checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week
input태그의 기본적인 표기방법은 아래와 같습니다. 별도의 열고 닫는 태그가 없는, 단독 태그로 사용하고 싶은 타입을 type안에 적어주면, 인풋타입을 사용할 수 있습니다. input태그는 회원가입 웹페이지에서 가장 많이 볼 수 있는 태그입니다. 하나씩 간단한 설명 후에, 화면상에서 볼 수 있는 링크는 맨 하단에 있습니다.
<input type="checkbox">
● <input type="checkbox">는 항목들을 여러개 선택할때, 사용됩니다.
● <input type="date">는 년, 월, 일에 대한 정보를 선택해서, 입력할 수 있습니다.
● <input type="datetime-local">는 년도, 월, 일, 시간을 선택해서 입력할 수 있습니다.
● <input type="email">는 이메일 주소를 입력하기위한 텍스트 박스입니다.
● <input type="file">는 사용자가 파일을 업로드 할 수 있도록 컨트롤창을 만들어 보여줍니다.
● <input type="hidden">는 수정할 수 없는 데이타나, 숨기고 싶은 정보들을 화면상에서 안보이게 할때 사용됩니다.
● <input type="image">는 버튼방식의 input을 사용하려고 할때 유용합니다. src에 이미지 경로를 입력하면, 이미지가 img태그를 사용하지 않고도, 바로 input에 사용됩니다.
● <input type="month">는 년도와 월에 대한 정보만 선택할 수 있습니다.
● <input type="number">는 숫자만 선택해서 입력할 수 있는 input박스입니다.
● <input type="password">는 보이지 않는 1줄짜리 텍스트를 입력하는 input박스입니다.
● <input type="radio">는 여러가지 항목중에서 한가지만 선택할때 사용됩니다.
● <input type="range">는 값의 범위를 보여주는 input 컨트롤입니다.
● <input type="reset">는 reset input이 속해있는, form태그 내의 input의 입력된 값을 초기화 해줍니다.
● <input type="search">는 한줄짜리 검색어를 입력하기 위한 텍스트 박스입니다. 박스 맨 오른쪽에 삭제아이콘이 포함될 수 있습니다.
● <input type="submit">는 input양식을 제출하는 버튼입니다.
● <input type="tel">는 전화번호를 입력하기 위한 컨트롤박스 입니다. 동적 키패드가 있는 장치에서는 전화번호 키패드가 표시됩니다.
● <input type="text">는 한줄만 입력할 수 있는 텍스트 박스입니다. 입력할 수 있는 텍스트의 길이를 조정할 수 있습니다.
● <input type="time">는 시간만 선택해서 입력할 수 있습니다.
● <input type="url">는 url을 입력하기위한 텍스트 필드입니다.
● <input type="week">는 년도와 몇번째 주인가를 선택해서 입력할 수 있습니다.
* input type을 태그로 입력했을경우의 가장 기본적인 코드들은 아래와 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>html_input_type</title>
<meta charset="UTF-8">
<meta name="description" content="행운공장이 블로그를 하는 사이트">
<meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
<meta name="author" content="행운공장, 행운월드">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0; padding: 0 0 100px; text-align: center; }
h3 {margin: 35px 0 5px 0;}
</style>
</head>
<body>
<h3>checkbox : 항목들을 여러개 선택(취소도 가능)</h3>
<input type="checkbox" name="hg"> <label for="hg">행운공장</label><br>
<input type="checkbox" name="hw"> <label for="hw">행운월드</label>
<h3>date : 년, 월, 일에 대한 정보를 선택</h3>
<input type="date">
<h3>datetime-local : 년도, 월, 일, 시간을 선택</h3>
<input type="datetime-local">
<h3>email : 이메일 주소를 입력</h3>
<input type="email" pattern=".+@google.com" size="30">
<h3>file : 파일을 업로드 할 수 있음</h3>
<input type="file">
<h3>hidden : 숨기고 싶은 정보를 화면상에서 안보이게 할때 사용(input태그가 분명히 입력되어져 있으나, 화면상에서는 안보임)</h3>
<input type="hidden">
<h3>image : input태그에서 이미지를 바로 사용할때 유용</h3>
<input type="image" src="https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F3465304%2Fattach%2Fbc75068243974c0aa94e9d9da28ced6f" width="100">
<h3>month : 년도와 월에 대한 정보만 선택</h3>
<input type="month">
<h3>number : 숫자만 선택해서 입력</h3>
<input type="number">
<h3>password : 보이지 않는 1줄짜리 텍스트를 입력</h3>
<input type="password" maxlength="10">
<h3>radio : 여러가지 항목중에서 한가지만 선택(단, 동일한 name일때만 가능)</h3>
<input type="radio" id="hg" name="hg" value="hg" checked> <label for="hg">행운공장</label><br>
<input type="radio" id="hw" name="hg" value="hw"> <label for="hw">행운월드</label>
<h3>range : 값의 범위를 보여주는 input 컨트롤</h3>
<input type="range">
<h3>reset : input의 입력된 값을 초기화</h3>
<form>
<label for="id">User ID:</label>
<input type="text" id="id" name="id" />
<input type="reset" value="reset">
</form>
<h3>search : 한줄짜리 검색어를 입력</h3>
<input type="search">
<h3>submit : input양식을 제출하는 버튼</h3>
<input type="submit">
<h3>tel : 전화번호를 입력하기 위한 컨트롤박스</h3>
<input type="tel">
<h3>text : 한줄만 입력할 수 있는 텍스트 박스</h3>
<input type="text">
<h3>time : 시간만 선택해서 입력</h3>
<input type="time">
<h3>url : url을 입력하기위한 텍스트 필드</h3>
<input type="url" placeholder="https://example.com">
<h3>week : 년도와 몇번째 주인가를 선택해서 입력</h3>
<input type="week">
</body>
</html>
위의 코드를 화면상에서 확인하고 싶다면 아래의 링크를 클릭해 보세요.
html_input_type
hhgongjang.cafe24.com
'코딩' 카테고리의 다른 글
| 코딩_타자게임_한글인사말 (0) | 2020.12.13 |
|---|---|
| 코딩_타자게임_영어단어 (0) | 2020.12.10 |
| 스크래치_피아노(pc버전)_건반음악 (0) | 2020.12.01 |
| 스크래치_피아노(모바일) (0) | 2020.11.25 |
| html_input_button과 <button> (0) | 2020.11.18 |
