TIL : 웹퍼블리싱 HTML 5회 (10,11)

I.  선택상자 (10)

학습목표 사용자의 입력에서 radio 버튼과 checkbox 버튼의 차이점과 각 버튼들의 사용방법에 대해서 알아보자. Radio 버튼을 배타적으로 선택할 수 있도록 만들기 Checkbox 버튼을 통해서 다중 선택된 값을 입력 받기

1. Radio 버튼의 입력 값 다루기(38)

전달되는 데이터

취미 중에서 하나가 전달되어야하는데 그냥 선택되었다 on여부만 전달된다

무엇을 선택했는지를 알아야함 그래서 name에다가 value를 넣어준다.

그러면 주소에다가 그 value가 간다

독서 등산 으로 간다

    <fieldset>
        <legend> 가장 좋아하는 취미</legend>
        <input type="radio" id="r" name="ha" value="독서">
        <label for="r">독서</label>

        <input type="radio" id="w" name="ha" value="걷기">
        <label for="w" >걷기</label>

        <input type="radio" id="c" name="ha" value="등산">
        <label for="c">등산</label>

    </fieldset>

그러나 실제로 전달은 식별자로 간다 

    <fieldset>
        <legend> 가장 좋아하는 취미</legend>
        <input type="radio" id="r" name="ha" value="1">
        <label for="r">독서</label>

        <input type="radio" id="w" name="ha" value="2">
        <label for="w" >걷기</label>

        <input type="radio" id="c" name="ha" value="3">
        <label for="c">등산</label>

    </fieldset>

 

2. 다중 선택을 위한 태그와 값의 전달방식(39)

(1) 다중선택

이번에는 가장이 아니라 그냥 좋아하는 취미이니까 다중선택을 위한것을 넣는다

    <fieldset>
        <legend> 좋아하는 취미</legend>
        <input type="checkbox" id="r" name="ha" value="1">
        <label for="r">독서</label>

        <input type="checkbox" id="w" name="ha" value="2">
        <label for="w" >걷기</label>

        <input type="checkbox" id="c" name="ha" value="3">
        <label for="c">등산</label>

    </fieldset>

체크박스는 이름이 동일한대도 동시에 체크가 가능하다

같은 이름을 가지면 데이터 전달은 같은값이 여러번 전달된다.

이런경우 같은이름으로 전달되면 배열로 전달된다.

그래서 이름을 맞추는것이 좋다 (체크박스처럼)

 

(2) 셀렉트

    <select name="chb"> 
        <option>선택</option>
        <option value="1">독서</option>
        <option value="2">걷기</option>
        <option value="3">등산</option>
    </select>

이렇게 하면 셀렉트를 만들 수 있다.

다만 value 에 식별자를 안넣으면 문제시된다.

백엔드 할때 value를 활용한다는것을 양지해두자.

 

한편 셀렉트도 다중선택이 가능하다

    <select multiple name="chb"> 
        <option>선택</option>
        <option value="1">독서</option>
        <option value="2">걷기</option>
        <option value="3">등산</option>
    </select>

mutiple을 넣어주면은 다중선택이 가능하다.

 

 

3. 버튼태그 (40)

<input type="submit" value="회원가입">
<input type="button" value="회원가입">
<button>회원가입</button>

 

세가지는 겉보기에는 동일하게 보인다

submit  button 태그와의 차이?가 어떻게 될까? 

 

submit는 캡션모양이지만, button은 이미지로 가능하다

즉 button은 그 안에 태그를 추가로 넣을 수있다.

 

<input type="submit" value="회원가입">
<input type="button" value="회원가입">
<button><img src="../images/8.png"></button>

 

II.  향상된 입력 컨트롤 ( 11)

1. HTML5에 새로 추가된 입력태그 (41)

(1) HTML5에서 추가된 입력 컨트롤들

위 3가지는 우리가 필요로 했던것들이 드디어 추가된 것이다 

 

    <fieldset>
        <legend> HTML5에서 새로 추가된 입력 컨트롤들</legend>

        <label>가입일</label>
        <input type="date">

        <label>색상</label>
        <input type="color">

        <label>볼륨</label>
        <input type="range" min="0" max="100" value="30">

    </fieldset>

date를 누르면 달력이 나온다.

 

color 색상은 RGB를 선택이 가능하다 실시간으로 반응이 나옴

 

range는 프로그래스 바가 나온다 이런거는 볼륨으로 가능하다

이런 경우 0~100 범위로 가능하다. (min max)

 

(2) 새로 추가된 앨리먼트

그런데 위 세가지는 브라우저마다 다르다 우리에게 좋지는안은데

디자인 할 때 우리의도대로 나와야하는데,,, 그떄마다 다르다 버전 업데이트 할때도 마찬가지이다.

그래서 현실적으로는 잘 사용되지않는다

 

그래서 쉽게사용할수 있게 하는 라이브러리가 있다. 이런경우에는 브라우저를 달리써도 동일하다

 

2. 필수 입력 필드를 위한 속성(42)

input이 가지고있는 내용중 속성들이 발전되면서 생겼다

(1) <input /> 태그의 변화

 

<div>
    <label for="uid">아이디(*)</label>
    <input id ="uid" name = "uid" required>
    <output>유효한 아이디 입니다</output>
</div>

입력을 안하면 이런방식으로 입력요구한다

 

나이를 했는데, 나이를 숫자로 입력해야한다 숫자형태만 들어올수있게끔 하는 제약을 걸어야한다

필수입력은 이면서 더불어서 그 형태는 숫자만 들어와야한다

막 입력한게 함부로 전달되면 안된다.

 

<div>
    <label>나이</label>
    <input name = "age" required type="number" min="10" max="100">
</div>

type을 number로 넣어준다

 

하지만 1237 까지도 나이가 될수있다

유효한 나이대까지 입력을 가능하게끔 할수있다. (min max)

 

 

3. Place Holder (43)

전화번호도 유효한지 검사가 필요하다

전화번호 형식이 맞는경우 전송이 가능한 경우로 하면된다

 

사용자가 입력하지않은 상태에 임시로 대신입력 혹은 가이던스하게 하는것을 place holder라고한다.

입력하려고 하면 사라지게한다.

<div>
    <label>전화번호</label>
    <input name = "age" required placeholder="대시(-)포함 : 010-1111-2222">
</div>

 

 

4. 자동완성 입력 해제 및 설정(44)

(1) 오토포커스 (autofocus)

입력을 하는데 키보드를 바로 쓸수가 없다 왜냐하면 포커스를 가지는 박스가 없다

만약에 페이지 로드되자마자 처음에 포커스가 되게끔 하는것을 해줄수 있다

 

들어가자마자 클릭필요없이 바로 포커스가 가게됨

 

(2) 자동완성 끄기

자동완성인데 어디에 들어있고 어떤녀석이지?

uid로 전송했던 내용이 나오는 것이다.

다른 사이트갔는데 uid 동일하게 있으면 그 텍스트 박스에서 내가 이전에 이 브라우저로 했던것이 목록으로 나온다.

 

이런경우 두가지 옵션이있다

첫번째는 브라우저에서 끈다

두번쨰는 특정 컬럼에 대해서 기능을 끌수있다.

 

 

autocomplete = "OFF" 을 하면 된다. 결국 자동완성이 안된다

<div>
    <label for="uid">아이디(*)</label>
    <input id ="uid" name = "uid" required placeholder="6자 이상의 영문" autofocus autocomplete="ON">
    <output>유효한 아이디 입니다</output>
</div>

(3) 자동완성 설정 (실시간으로 추천)

가끔은 내가 목록을 선택하게 하거나 자동완성기능을 지원할수도 있다.

앞에서는 껏지만 여기서는 선택적으로(옵션) 값입력하게끔 할수있다.

<input type="text" name="hb2" list="hb2-list">
<datalist id="hb2-list">
    <option value="여행">
    <option value="여의봉가지고놀기"></option>
    <option value="여의도한강공원돌기"></option>
    <option value=" 치맥먹기"></option>
</datalist>

자동완성 기능을 지원한다. 여의 만 치면 다른것이 나온다 

 

5. 정규식을 이용한 유효성 검사 (45)

전화번호가 있는데 형식을 안내멘트 해도 대충입력하는 사람이 분명있다.

그래서 전달되는 내용이 엉망임

이런것을 막기위해서는 흔히 말하는 패턴문자열를 만들기 위해서 공부를 하자...

 

이런경우 유효한 패턴문자를 쓰면된다 이런것을 정규식이라고한다.

자바, JS, 오라클 모든 플랫폼에서 다 공통으로 쓴다

 

MDN에 있다.

 

패턴문자열이란 전화번호에서 바뀔수있는곳과 고정된곳을 나누어서

바뀔수있는곳을 대체가능한 문자로 패턴을 만든다

 

이런경우 사용되는것이 [] 가 있다

이거는 한 문자를 대신한다 한자리에 들어올수있는 숫자를 나열한다

[0123456789] == [0-9] == \d 

이렇게 세가지가 같다.

 

그런데 이런경우에 쉬워졌긴한데, 반복되는게 번거롭다.

{} 로 하면 그 횟수를 지정할수있다.

<div>
    <label>전화번호</label>
    <input name = "age" required placeholder="대시(-)포함 : 010-1111-2222" pattern="01[0,1,6,8]-\d{3,4}-\d{4}">
</div>

 

 

이렇게 해서 형식을 일치시킬수 있다.

 

 

---

1. 보충

 

 

 

 

 

2. 회고