59doit

HTML 입력양식 (2) 타입 본문

HTML & CSS

HTML 입력양식 (2) 타입

yul_S2 2023. 3. 7. 00:25
반응형

type

 

텍스트 입력 - text

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>텍스트 입력</h1>
  <form>
    제목 : <input type="text" name="title">
  </form>
</body>

</html>

▶<input> 태그의 type 속성값을 “text"로 설정하면, 사용자로부터 한 줄의 텍스트를 입력받을 수 있다.

 

 

비밀번호 입력 - password

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>비밀번호 입력</h1>
  <form>
    ID : <input type="text" name="username"><br/>
    pw : <input type="password" name="password">
  </form>
</body>

</html>

▶<input> 태그의 type 속성값을 “password"로 설정하면, 사용자로부터 비밀번호를 입력받을 수 있다.
비밀번호를 입력받기 때문에 화면에는 입력받은 문자나 숫자 대신 별표(*)나 작은 원 모양(•)이 표시된다.

 

전송 버튼 - submit

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>전송버튼</h1>
  <form>
    사용자명 : <input type="text" name="username"><br/>
    <input type="submit" value="전송">
  </form>
</body>

</html>

▶<input> 태그의 type 속성값을 “submit"으로 설정하면, 사용자로부터 입력받은 데이터(data)를 서버의 폼 핸들러로 제출하는 버튼이 된다.

 

 

재설정 버튼 - reset

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>재설정</h1>
  <form>
    사용자명 : <input type="text" name="username"><br/>
    <input type="reset" value="재설정">
  </form>
</body>

</html>

▶<input> 태그의 type 속성값을 “reset"으로 설정하면, 사용자가 입력한 값이 초기 값으로 재설정하는 버튼이 된다.

 

 

 

이미지 버튼 - image

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>이미지</h1>
  <form>
    제목 : <input type="text" name="username"><br/>
    <input type="image" src="yul.png">
  </form>
</body>

</html>

▶<input> 태그의 type 속성값을 “image"으로 설정하면, 전송버튼(Submit Button)의 역할을 하면서 이미지로 출력되는 버튼이 된다.

 

일반 버튼 - button

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>일반 버튼</h1>
  <form>
    <input type="button" onclick="alert('Hello World!')" value="Click">
  </form>
</body>

</html>

▶<input> 태그의 type 속성값을 “button"으로 설정하면, 일반적인 버튼이 된다.

 

라디오 버튼 - radio

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>라디오</h1>
  <form>
    <input type="radio" name="fruit" value="apple" checked> 사과
    <input type="radio" name="fruit" value="banana"> 바나나
    <input type="radio" name="fruit" value="orange"> 오렌지
    <input type="radio" name="fruit" value="strawberry"> 딸기
  </form>
</body>

</html>

▶<input> 태그의 type 속성값을 “radio"로 설정하면, 사용자로부터 여러 개의 옵션(option) 중에서 단 하나의 옵션만을 입력받을 수 있다. 이때 서버로 정확한 입력을 전송하기 위해서는 모든 input 요소의 name 속성이 같아야 한다.

 

체크박스 - checkbox

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>체크박스</h1>
  <form>
    <input type="checkbox" name="fruit" value="apple" checked> 사과
    <input type="checkbox" name="fruit" value="banana"> 바나나
    <input type="checkbox" name="fruit" value="orange"> 오렌지
    <input type="checkbox" name="fruit" value="strawberry"> 딸기
  </form>
</body>

</html>

▶<input> 태그의 type 속성값을 “checkbox"로 설정하면, 사용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있다. 체크박스는 라디오 버튼과는 달리 여러 개의 옵션을 한 번에 입력받을 수 있다. 이때 서버로 정확한 입력을 전송하기 위해서는 모든 input 요소의 name 속성이 같아야 한다.

 

파일 선택 - file

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>파일선택</h1>
  <form>
    <input type="file" name="imageFile" accept="image/*">
  </form>
</body>

</html>

▶<input> 태그의 type 속성값을 “file"로 설정하면, 파일을 전송할 수 있다.

 

숫자 입력(number)

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>숫자 입력</h1>
  <form>
    <input type="number" name="num" min="1" max="100">
  </form>
</body>

</html>

▶<input> 태그의 type 속성값을 “number"로 설정하면, input 요소는 사용자가 숫자를 입력할 수 있도록 해준다.

number 타입이 일반 text 타입과 다른 점은 입력 필드 우측에 숫자의 크기를 조절할 수 있는 상하 버튼이 생기는 점이다.

min 속성과 max 속성을 이용하여 숫자 선택에 제한값을 설정할 수도 있다.

 

 

입력 범위 지정(range)

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>입력범위지정</h1>
  <form>
    0 <input type="range" name="favnum" min="1" max="9">9
  </form>
</body>

</html>

▶<input> 태그의 type 속성값을 “range"로 설정하면, input 요소는 사용자가 일정 범위 안의 값만을 입력할 수 있도록 해준다. 브라우저 지원 여부에 따라 값을 선택하기 위한 수평 조절바를 보여줍니다.

 

 

 

색상 입력(color)

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>색상입력</h1>
  <form>
    <input type="color" name="color" value="#ff0001">
  </form>
</body>

</html>

▶<input> 태그의 type 속성값을 “color"로 설정하면, input 요소는 사용자가 색상을 입력할 수 있도록 해준다.

선택된 색상은 #을 제외한 6자리의 16진수 색상값으로 전송된다. 브라우저 지원 여부에 따라 색상을 선택하기 위한 도구를 보여준다.

 

날짜 입력(date)

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>날짜입력</h1>
  <form>
    <input type="date" name="day1">
  </form>
</body>

</html>

▶<input> 태그의 type 속성값을 “date"로 설정하면, input 요소는 사용자가 날짜를 입력할 수 있도록 해준다.

날짜를 선택하기 위한 캘린더를 보여준다.

 

 

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>날짜입력</h1>
  <form>
    <input type="date" name="day2" min="1970-01-01" max="2023-12-31">
  </form>
</body>

</html>

▶ min과 max 속성을 사용하여 날짜 선택에 제한값을 설정할 수도 있다.

 

 

 

시간 입력(time)

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>시간입력</h1>
  <form>
    <input type="time" name="time" >
  </form>
</body>

</html>

▶<input> 태그의 type 속성값을 “time"로 설정하면, input 요소는 사용자가 시간을 입력할 수 있도록 해준다.

 

 

 

날짜와 시간 입력(datetime-local)

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>날짜와 시간입력</h1>
  <form>
    <input type="datetime-local" name="time" >
  </form>
</body>

</html>

▶<input> 태그의 type 속성값을 “datetime-local"로 설정하면, input 요소는 사용자가 날짜와 시간을 입력할 수 있도록 해준다.

 

 

연도와 월 입력(month)

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>연도와 월 입력</h1>
  <form>
    <input type="month" name="month" >
  </form>
</body>

</html>

▶<input> 태그의 type 속성값을 “month"로 설정하면, input 요소는 사용자가 연도와 월을 입력할 수 있도록 해준다.

 

 

연도와 주 입력(week)

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>연도와 주 입력</h1>
  <form>
    <input type="week" name="week" >
  </form>
</body>

</html>

▶<input> 태그의 type 속성값을 “week"로 설정하면, input 요소는 사용자가 연도와 몇 번째 주인지를 입력할 수 있도록 해준다.

 

이메일 입력(email)

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>이메일입력</h1>
  <form>
    <input type="email" name="email" >
  </form>
</body>

</html>

▶<input> 태그의 type 속성값을 “email"로 설정하면, input 요소는 사용자가 email 주소를 입력할 수 있도록 해준다.

 

 

URL 주소 입력(url)

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>URL 주소입력</h1>
  <form>
    <input type="url" name="url" >
  </form>
</body>

</html>

▶<input> 태그의 type 속성값을 “url"로 설정하면, input 요소는 사용자가 URL 주소를 입력할 수 있도록 해준다.

 

전화번호 입력(tel)

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>전화번호입력</h1>
  <form>
    <input type="tel" name="tel" >
  </form>
</body>

</html>

▶<input> 태그의 type 속성값을 “tel"로 설정하면, input 요소는 사용자가 전화번호를 입력할 수 있도록 해준다.

 

 

검색어 입력(search)

<html>

<head>
<title>입력요소타입</title>
</head>

<body>
  <h1>검색어입력</h1>
  <form>
    <input type="search" name="search" >
  </form>
</body>

</html>

▶<input> 태그의 type 속성값을 “search"로 설정하면, input 요소는 사용자가 검색어를 입력할 수 있도록 해준다. 이러한 검색 필드는 보통의 텍스트 필드(text field)와 동일하게 동작한다.

search 타입이 일반 text 타입과 다른 점은 입력 필드에 검색어를 입력하면, 입력 필드 우측에 입력된 검색어를 바로 삭제할 수 있는 엑스(X) 표시가 생기는 점이다.

 

 

 

 

 

 

 

 

 

 

반응형

'HTML & CSS' 카테고리의 다른 글

HTML 입력양식 (4) 선택  (3) 2023.03.09
HTML 입력양식 (3) 속성  (1) 2023.03.08
HTML 입력양식 (1) 입력폼  (3) 2023.03.06
HTML 기본요소 (7) 테이블  (0) 2023.03.05
HTML 기본요소 (6) 리스트  (0) 2023.02.09
'HTML & CSS' Related Articles more
Comments