smarti,스마트아이

html 입력양식 1

입력폼 (form)

웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있다. 또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용한다.

form 요소는 다음과 같은 문법으로 사용한다.

<form action="처리할페이지주소" method="get|post"></form>

action 속성

action 속성은 입력받은 데이터를 처리할 서버 상의 URL 주소를 명시한다.
전달받은 데이터를 처리하는 서버 프로그램을 폼 핸들러(form-handler)라고 한다.

 

method 속성

method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시한다.
따라서 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달된다.
method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET 방식과 POST 방식으로 나눠진다.

 

GET 방식

GET 방식은 주소에 데이터(data)를 추가하여 전달하는 방식이다. 데이터가 주소 입력창에 그대로 나타나며, 전송할 수 있는 데이터의 크기 또한 제한적이다. 따라서 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용한다.

 

POST 방식

POST 방식은 데이터(data)를 별도로 첨부하여 전달하는 방식이다. 데이터가 외부에 드러나지 않으며, 전송할 수 있는 데이터의 크기 또한 제한이 없다. 따라서 보안성 및 활용성이 GET 방식보다 좋다.

 

HTML5 Attributes

HTML5에서 <form> 태그에 추가된 속성을 아래와 같다.

 - autocomplete

 - novalidate

입력(input) 요소 타입(type)

form 요소는 다양한 타입의 input 요소를 포함할 수 있다.
HTML에서 자주 사용되는 input 요소의 대표적인 타입은 다음과 같다.

1. text
2. password
3. submit
4. reset
5. image
6. button
7. radio
8. checkbox
9. file

HTML5에서 새롭게 추가된 input 요소의 타입은 다음과 같다.

1. 숫자 입력(number)
2. 입력 범위 지정(range)
3. 색상 입력(color)
4. 날짜 입력(date)
5. 시간 입력(time)
6. 날짜와 시간 입력(datetime-local)
7. 연도와 월 입력(month)
8. 연도와 주 입력(week)
9. 이메일 입력(email)
10. URL 주소 입력(url)
11. 전화번호 입력(tel)
12. 검색어 입력(search)

텍스트 입력 (text)

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

<form>
  제목 : <input type="text" name="title">
</form>

비밀번호 입력 (password)

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

<form>
  사용자명 : <input type="text" name="username"><br/>
  비밀번호 : <input type="password" name="password">
</form>

전송버튼 (submit)

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

폼 핸들러(form-handler)란 입력받은 데이터를 처리하기 위한 서버 측의 웹 페이지를 의미한다.
이러한 폼 핸들러의 주소는 form 요소의 action 속성을 이용하여 명시할 수 있다.

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

재설정 버튼 (reset)

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

<form action="/">
  사용자명 : <input type="text" name="username" value="개발곰"><br/>
  <input type="reset" value="재설정">
</form>

이미지 버튼 (image)

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

<form action="/">
  사용자명 : <input type="text" name="username"><br/>
  <input type="image" src="/resources/images/logo/64x64.png">
</form>

전송버튼이 아닌 일반적인 버튼을 이미지로 처리할려면 <img> 태그를 사용하고 이를 자바스크립트를 이용하여 액션을 지정해야 한다.

일반 버튼 (button)

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

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

button은 <button> 태그로도 표현이 가능하다. 

라디오 버튼 (radio)

<input> 태그의 type 속성값을 "radio"로 설정하면, 사용자로부터 여러 개의 옵션(option) 중에서 단 하나의 옵션만을 입력받을 수 있다.

이때 서버로 정확한 입력을 전송하기 위해서는 모든 input 요소의 name 속성이 같아야 한다.

<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"> 딸기

체크박스 (checkbox)

<input> 태그의 type 속성값을 "checkbox"로 설정하면, 사용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있다.

체크박스는 라디오 버튼과는 달리 여러 개의 옵션을 한 번에 입력받을 수 있다.
이때 서버로 정확한 입력을 전송하기 위해서는 모든 input 요소의 name 속성이 같아야 한다.

<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"> 딸기

파일 선택 (file)

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

<input type="file" name="imageFile" accept="image/*">

숫자 입력 (number)

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

number 타입이 일반 text 타입과 다른 점은 입력 필드 우측에 숫자의 크기를 조절할 수 있는 상하 버튼이 생기는 점이다.
브라우저의 지원 여부에 따라 min 속성과 max 속성을 이용하여 숫자 선택에 제한값을 설정할 수도 있다.

<input type="number" name="num" min="1" max="9">

number 타입은 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.

입력 범위 지정 (range)

<input> 태그의 type 속성값을 "range"로 설정하면, input 요소는 사용자가 일정 범위 안의 값만을 입력할 수 있도록 해준다.

브라우저 지원 여부에 따라 값을 선택하기 위한 수평 조절바를 보여줍니다.

0 <input type="range" name="favnum" min="1" max="9"> 9

range 타입은 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.

색상 입력 (color)

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

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

<input type="color" name="color" value="#FF0000">

color 타입은 사파리 9.1과 그 이전 버전, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.

날짜 입력 (date)

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

브라우저 지원 여부에 따라 날짜를 선택하기 위한 캘린더를 보여준다.

<input type="date" name="day1">

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

<input type="date" name="day2" min="1977-01-01" max="2020-12-31">

date 타입은 파이어폭스, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.

시간 입력 (time)

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

브라우저 지원 여부에 따라 시간을 선택하기 위한 도구를 보여줍니다.

<input type="time" name="time">

time 타입은 파이어폭스, 익스플로러 12와 그 이전 버전에서 지원하지 않는다.

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

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

브라우저 지원 여부에 따라 날짜를 선택하기 위한 캘린더와 시간을 선택하기 위한 도구를 보여준다.

<input type="datetime-local" name="time">

datetime-local 타입은 파이어폭스, 익스플로러 12와 그 이전 버전에서 지원하지 않는다.

연도와 월 입력 (month)

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

브라우저 지원 여부에 따라 연도와 월을 선택하기 위한 캘린더를 보여준다.

<input type="month" name="month">

month 타입은 파이어폭스, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.

연도와 주 입력 (week)

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

브라우저 지원 여부에 따라 연도와 주를 선택하기 위한 캘린더를 보여준다.

<input type="week" name="week">

week 타입은 파이어폭스, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.

이메일 입력 (e-mail)

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

브라우저 지원 여부에 따라 전송할 때 입력한 email 주소가 유효한 email 주소인지 자동으로 검사한다.

<input type="email" name="email">

email 타입은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

URL 주소 입력 (url)

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

브라우저 지원 여부에 따라 전송할 때 입력한 URL 주소가 유효한 URL 주소인지 자동으로 검사한다.

<input type="url" name="url">

url 타입은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.

전화번호 입력 (tel)

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

<input type="tel" name="tel">

tel 타입은 사파리 8에서만 지원한다.

검색어 입력 (search)

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

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

<input type="search" name="keyword">

입력(input) 요소 속성(attributes)

input 요소는 다양한 속성을 가지고 있다.
input 요소의 여러 속성을 사용하면 사용자가 입력하는 방식을 더욱 다양하게 제어할 수 있다.
HTML에서 자주 사용되는 input 요소의 대표적인 속성은 다음과 같다.

1. value
2. readonly
3. disabled
4. maxlength
5. size

value 속성

value 속성은 input 요소의 입력 필드(input field)에 표시되는 초깃값을 설정한다.

사용자명: <input type="text" name="name" value="개발곰">

readonly 속성

readonly 속성은 사용자가 입력 필드를 볼 수는 있으나, 수정할 수는 없도록 설정한다.
disabled 속성과 다른 점은 전송 버튼(submit)을 누르면 값이 서버로 전송된다는 점이다.

사용자명: <input type="text" name="name" value="개발곰" readonly>

disabled 속성

disabled 속성은 사용자가 입력 필드를 아예 사용할 수 없도록 설정한다.
disabled 속성이 설정된 입력 필드는 사용할 수도 없고, 클릭할 수도 없다.
또한, readonly 속성과는 달리 전송 버튼(submit)을 눌러도 초깃값이 서버로 전송되지 않는다.

사용자명: <input type="text" name="name" value="개발곰" disabled>

maxlength 속성

maxlength 속성은 입력 필드에 입력할 수 있는 최대 문자수(length)를 설정한다.

사용자명: <input type="text" name="name" value="개발곰" maxlength="10">

size 속성

size 속성은 입력 필드에 보여지는 input 요소의 크기(size)를 설정한다.
maxlength 속성과는 달리 입력 필드가 한 번에 보여줄 수 있는 문자수만을 의미한다.
따라서 입력될 수 있는 최대 문자수는 maxlength 속성값에 따라 달라지며, size 속성과는 전혀 무관한다.

사용자명: <input type="text" name="name" value="개발곰" size="10">

 

[세상살이] - 크롬 확장 프로그램으로 마우스 우클릭 해제

크롬 확장 프로그램으로 마우스 우클릭 해제

[세상살이] - 바둑에 담긴 지혜

바둑에 담긴 지혜

[코딩공부] - CSS 박스모델, 패딩, 테두리

CSS 박스모델, 패딩, 테두리

[디자인공부] - 포토샵으로 모피 문자 만들기

포토샵으로 모피 문자 만들기

[디자인공부] - nPDF 다운로드 및 설치, 64비트 사용, 윈도우10

nPDF 다운로드 및 설치, 64비트 사용, 윈도우10