smarti,스마트아이

html5 기본정리 2

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

html5에서 추가된 input 요소의 타입

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)

숫자 입력(number)

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

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

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과 그 이전 버전에서 지원하지 않는다.

날짜와 시간 입력 (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">

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

HTML5 form 요소 속성

HTML5에서 새롭게 추가된 form 요소의 속성은 다음과 같다.
 - autocomplete
 - novalidate

HTML5 input 요소 속성

HTML5에서 새롭게 추가된 input 요소의 속성은 다음과 같다.
 - autocomplete
 - autofocus
 - form
 - formaction
 - formenctype
 - formmethod
 - formnovalidate
 - formtarget
 - height and width
 - list
 - min and max
 - multiple
 - pattern
 - placeholder
 - required
 - step

autocomplete 속성

autocomplete 속성은 form 요소나 input 요소에 입력된 정보를 자동 저장할지에 대한 여부를 명시한다.
이 속성의 값이 on으로 설정되면, 브라우저는 사용자가 입력하는 정보를 자동으로 저장한다.
그 이 후에는 입력되는 입력값을 저장된 정보를 바탕으로 자동 완성해 준다.

이 속성은 아래와 같은 input 타입에서만 사용할 수 있다.

- text, search, url, tel, email, password, datepickers, range, color

<form action="/" autocomplete="on">
  이름 : <input type="text" name="name"><br>
  이메일 : <input type="email" name="email" autocomplete="off"><br><br>
  <input type="submit">
</form>

novalidate 속성

novalidate 속성은 input 요소의 속성이 아닌 form 요소의 속성이다.
이 속성은 입력한 정보(data)를 전송할 때, 그 정보가 유효성 검사에 대한 여부를 명시한다. url 타입이나 email 타입과 같이 자동으로 유효성 검사를 하는 input 타입에 이 속성을 기입하면 유효성 검사를 하지 않는다.
즉, 이 속성이 사용된 form 요소로 전달받은 정보(data)는 반드시 서버 측에서 따로 유효성 검사를 실시해야 한다.

<form action="/" novalidate>
  이메일 : <input type="email" name="email">
  <input type="submit">
</form>

novalidate 속성은 Internet Explorer 9 이전 버전, Safari 10 버전에서 지원되지 않는다.

autofocus 속성

autofocus 속성은 웹 페이지가 로드(load)될 때, 속성이 적용된 input 요소에 자동으로 포커스(focus)가 가도록 해준다.

<form action="/examples/media/request.php">
    사용자 : <input type="text" name="username"><br>
    비밀번호 : <input type="password" name="password" autofocus><br><br>
</form>

autofocus 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

form 속성

form 속성은 해당 input 요소의 위치에 상관없이 포함될 form 요소를 명시해 준다.
포함할 form 요소의 id 속성값을 공백으로 연결하여, 둘 이상의 form 요소에 포함할 수도 있다.

<form action="/examples/media/request.php" id="user">
    사용자 : <input type="text" name="username"><br><br>
</form>
...
비밀번호 : <input type="password" name="password" form="user">

form 속성은 익스플로러에서 지원하지 않는다.

formaction 속성

formaction 속성은 입력한 정보(data)를 전송할 때 정보가 전달될 서버 측 파일을 명시한다.
즉, formaction 속성은 form 요소의 action 속성을 덮어쓰게 된다.
이 속성을 사용하면 입력된 정보를 넘겨줄 서버 측 파일을 input 요소에서 바꿀 수 있게 된다.

이 속성은 submit 타입과 image 타입에서만 사용할 수 있다.

<form action="/examples/media/request.php">
    사용자 : <input type="text" name="username"><br>
    비밀번호 : <input type="password" name="password"><br><br>
    <input type="submit" value="관리자 권한으로 전송" formaction="/examples/media/request_admin.php"><br>
</form>

formaction 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

formenctype 속성

formenctype 속성은 입력한 정보(data)를 전송할 때 암호화하는 방법을 명시한다.
즉, formaction 속성은 form 요소의 enctype 속성을 덮어쓰게 된다.

formenctype 속성은 form 요소의 method 속성이 post일 때만 적용된다.
이 속성은 submit 타입과 image 타입에서만 사용할 수 있다.

<form action="/examples/media/request_enctype.php" method="post">
    사용자 이름을 입력해주세요 : <input type="text" name="username"><br><br>
    <input type="submit" value="암호화하여 전송" formenctype="multipart/form-data"><br>
</form>

formenctype 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

formmethod 속성

formmethod 속성은 입력한 정보(data)를 전송할 때 사용하는 http 메소드(method)를 명시한다.
즉, formmethod 속성은 form 요소의 method 속성을 덮어쓰게 된다.

이 속성은 submit 타입과 image 타입에서만 사용할 수 있다.

<form action="/examples/media/request.php" method="get">
    사용자 이름을 입력해주세요 : <input type="text" name="username"><br><br>
    <input type="submit" value="post 방식으로 전송" formmethod="post"><br>
</form>

formmethod 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.

formnovalidate 속성

formnovalidate 속성은 입력한 정보(data)를 전송할 때 그 정보가 유효한지 아닌지를 검사하지 않았다는 것을 명시한다.
즉, formnovalidate 속성은 form 요소의 novalidate 속성을 덮어쓰게 된다.

이 속성은 오직 submit 타입에서만 사용할 수 있다.

<form action="/examples/media/request.php">
    여러분이 자주 들리는 사이트의 URL 주소를 입력해 주세요 : <input type="url" name="url"><br><br>
    <input type="submit" value="novalidate 방식으로 전송" formnovalidate><br>
</form>

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

formtarget 속성

formtarget 속성은 입력한 정보(data)를 전송한 후, 그 결과로 받은 응답 페이지를 어디에 출력할지를 명시합니다.
즉, formtarget 속성은 form 요소의 target 속성을 덮어쓰게 됩니다.

이 속성은 submit 타입과 image 타입에서만 사용할 수 있습니다.

<form action="/examples/media/request.php">
    사용자 이름을 입력해주세요 : <input type="text" name="username"><br><br>
    <input type="submit" value="응답 화면을 새창에 표시" formtarget="_blank"><br>
</form>

formtarget 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.

height와 width 속성

<input>태그의 type 속성이 "image"일 경우에는 height 속성과 width 속성을 사용하여 이미지의 높이와 너비를 명시할 수 있습니다.
따라서 이 속성은 오직 image 타입에서만 사용할 수 있습니다.
또한, 이미지를 클릭하면 클릭한 곳의 x좌표와 y좌표가 x와 y라는 이름으로 같이 전송됩니다.

<form action="/examples/media/request.php">
    사용자 : <input type="text" name="username"><br>
    비밀번호 : <input type="password" name="password" autofocus><br><br>
    <input type="image" src="/examples/images/img_penguin.png" alt="전송" height="26" width="26">
    그림을 클릭하시면 전송됩니다!
</form>

list 속성

list 속성은 해당 input 요소에 대한 미리 정의된 옵션 리스트를 설정하는 datalist 요소와 관련이 있다.
input 요소의 list 속성값이 datalist 요소의 id 속성값과 일치해야만 연결이 된다.

<form action="/examples/media/request.php">
    <input list="lectures" name="lecture">
        <datalist id="lectures">
            <option value="HTML">
            <option value="CSS">
        </datalist>
</form>

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

min과 max 속성

min속성과 max 속성은 input 요소에 입력할 수 있는 최솟값과 최댓값을 명시한다.

이 속성은 다음과 같은 input 타입에서만 사용할 수 있다.

 - number, range, date, time, datetime-local, month, week 타입

<form action="/examples/media/request.php">
    <input type="date" name="theday" min="1977-01-01" max="2020-12-31"><br><br>
    <input type="submit" value="전송">
</form>

min과 max 속성은 파이어폭스, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

multiple 속성

multiple 속성은 사용자가 input 요소에 값을 두 개 이상 입력하는 것을 허용한다.

이 속성은 email 타입과 file 타입에서만 사용할 수 있습니다.

<form action="/examples/media/request.php">
    <input type="file" name="uploadfile" multiple><br><br>
    <input type="submit" value="전송">
</form>

multiple 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

 

pattern 속성

pattern 속성은 input 요소에 입력된 값을 검사하기 위한 정규 표현식(regular expression)을 명시한다.
정규 표현식이란 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴을 의미한다.

이 속성은 다음과 같은 input 타입에서만 사용할 수 있다.

 - text, password, email, tel, url 타입

<form action="/examples/media/request.php">
    <input type="email" name="email"
        pattern="[a-zA-Z0-9]+[@][a-zA-Z0-9]+[.]+[a-zA-Z]+[.]*[a-zA-Z]*" title="이메일 양식">
</form>

위의 예제에서 사용된 정규 표현식의 의미는 다음과 같다.

1. [a-zA-Z0-9] : 영문 소문자나 영문 대문자, 숫자 중 어느 것이라도 개수에 상관없이 나올 수 있음.
2. [@] : '@' 문자만이 나와야 함.
3. [.] : '.' 문자만이 나와야 함.
4. [.]* : '.' 문자가 나와도 되고 나오지 않아도 됨.
5. [a-zA-Z0-9]* : 영문 소문자나 영문 대문자, 숫자 중 어느 것이라도 개수에 상관없이 나와도 되고 나오지 않아도 됨.

따라서 위와 같은 정규 표현식을 사용하면, 해당 문자열이 이메일 양식에 맞는 문자열인지를 확인할 수 있다.

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

placeholder 속성

placeholder 속성은 input 요소에 입력되어야 할 값에 대한 힌트를 제공한다. 이러한 힌트는 예시가 될 수도 있고, 입력 형식에 대한 설명이 될 수도 있다. placeholder 속성값은 해당 입력 필드에 포커스가 오게 되면 더 이상 표시되지 않는다.

이 속성은 다음과 같은 input 타입에서만 사용할 수 있습니다.

 - text, password, email, tel, url, search 타입

<form action="/examples/media/request.php">
    사용자 : <input type="text" name="username" placeholder="홍길동"><br>
    비밀번호 : <input type="password" name="password" placeholder="1234"><br><br>
</form>

placeholder 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

required 속성

required 속성은 반드시 입력되어야 할 필수 input 요소를 명시한다. 이 속성이 설정된 모든 input 요소에 입력값이 존재해야만 서버로 전송(submit)할 수 있다.

<form action="/examples/media/request.php">
    이름 : <input type="text" name="name" required> (이름은 반드시 입력해야 해요!)<br>
    나이 : <input type="number" name="age" min="1" max="99"><br><br>
</form>

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

step 속성

step 속성은 input 요소에 입력할 수 있도록 허용된 숫자 간격을 명시한다.
예를 들어, step 속성값이 2이면, 입력이 허용되는 숫자는 ..., -4, -2, 0, 2, 4,... 가 된다.

이 속성은 다음과 같은 input 타입에서만 사용할 수 있다.

 - number, range, date, time, datetime-local, month, week 타입

<form action="/examples/media/request.php">
    여러분이 가장 좋아하는 숫자는 몇인가요? (단, -30부터 30사이에서 5단위로 골라주세요!)<br><br>
    <input type="number" name="favnum" min="-30" max="30" step="5"><br><br>
</form>

step 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

 

HTML5 기타 요소

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

요소	설명
<datalist>	input 요소에 대해 미리 정의된 옵션 리스트를 명시함.
<keygen>	form 요소 안에 두 개의 key를 만들어주는 생성기를 명시함.
<output>	스크립트 등으로 실행된 계산의 결과를 바로 나타냄.

datalist 요소

datalist 요소는 input 요소에 미리 정의된 옵션 목록을 제공해 주는 요소이다.
사용자는 텍스트를 바로 입력해도 되고, 드롭다운 메뉴에서 미리 정의한 옵션 중의 하나를 선택해도 된다.

작성하는 방법은 input 요소의 list 속성값과 datalist 요소의 id 속성값과 동일해야 연결이 된다.

좋아하는 과일은?
<input list="fruits" name="fruit">
<datalist id="fruits">
   <option value="apple">
   <option value="strawberry">
   <option value="banana">
   <option value="grape">
</datalist>

datalist 요소는 익스플로러 10 이전 버전에서는 지원하지 않는다.

keygen 요소

keygen 요소는 사용자가 입력한 데이터를 공개키 암호 방식의 키를 생성하여 폼을 전송한다. 폼 전송시 비밀 키와 공개 키가 동시에 생성되어 비밀 키는 클라이언트 측에, 공개 키는 서버 측에 전송된다.

이는 주로 사용자가 인증할 시에 사용할 수 있다.

<form>
  아래 값을 입력하고 전송 버튼을 누르면 암호화하여 전송하게 됩니다.
  <input type="text" name="username">
  <keygen name="security">
  <input type="submit" value="전송"> 
</form>

keygen 요소는 익스플로러에서 지원하지 않는다.

output 요소

output 요소는 스크립트(script)에 의해 실행된 계산의 결과를 바로 표시해준다.

<form oninput="total.value=parseInt(val1.value) + parseInt(val2.value)">
  0<input type="range" id="val2" value="50" min="0" max="100">100
  + <input type="number" id="val1" value="20">
  = <output name="total" for="val1 val2"></output>
</form>

for 속성에는 해당 결과와 관련 있는 요소의 id를 공백으로 구분으로 나열한다.

output 요소는 익스플로러에서 지원하지 않는다.

 

 

[코딩공부] - CSS와 jQuery로 풍경 애니메이션 만들기 예제 다운로드

CSS와 jQuery로 풍경 애니메이션 만들기 예제 다운로드

[코딩공부] - CSS 이미지스프라이트, 네비게이션바, 드롭다운

CSS 이미지스프라이트, 네비게이션바, 드롭다운

[세상살이] - 색으로 대표되는 컬러푸드 - Red (레드푸드)

색으로 대표되는 컬러푸드 - Red (레드푸드)

[디자인공부] - 포토샵으로 금박, 은박 문자 만들기

포토샵으로 금박, 은박 문자 만들기

[디자인공부] - WebP 웹을 위한 새로운 이미지 포맷

WebP 웹을 위한 새로운 이미지 포맷