15_추가 폼태그와 속성들

html5에서 추가된 폼태그와 속성들은 현재 사용하고 있는 브라우저(크롬, ms edge, 파이어폭스, 오페라, 사파리, 웨일 등)에서 버전별 지원을 하기 때문에 지원 상황을 확인하고 사용해야 한다. http://caniuse.com(브라우저 버전별 태그 지원 유무 확인 사이트)

1. 폼양식을 그룹 지정하기 위한 요소 _ fieldset, legend

form name="폼이름" method="post(폼 내용 암호화)/get(내용 공개)" action="받을 서버 주소(폼 양식에 따라 작성된 내용을 어디 서버로 보낼지)"

필수입력정보

label(제목)이 나올 경우 placeholder로 안의 내용은 label과 동일하게 가면 안되고 비밀번호 - 비밀번호 예시를 보여줘야함

placeholder="폼 안에 어떤 내용이 들어갈 지 알려줄 수 있는 문구를 입력"

label 태그를 써서 for="a"속성과 id="a" 속성이 같은 팀?이라는 것을 알려줌_label 태그는 웹접근성/시각장애인을 위해 꼭 써줘야함(*lable 태그를 안보이게 숨길 수 있음)

선택입력정보


주소 쓸 때는 type="adress" , 이메일 쓸 때는 type="email" 속성을 사용해야 한다.
이 속성의 장점은 엉터리 이메일을 쓰면 안내문구가 알아서 나온다

placeholde : 사용자가 양식에 데이터를 입력 시 입력 할 내용을 미리 알려주어 오류가 나지 않도록 방지해주는 역할을 함. 웹접근성 측면에서 도움이 됨


2. search : 헤더영역, 콘텐츠 영역에서 사용자가 원한느 정보를 직접 입력하여 검색할 수 있도록 하고자 할 때 사용하는 양식으로서 단어를 입력하면 오른쪽 끝에 'X' 표시가 뜨며, 클릭시 내용이 삭제됨.

3. email : 이메일 주소를 입력하기 위한 박스로서 입력 양식이 맞지 않으 경우 에러가 발생한다.

4. URL : 사용자가 도메인 주소를 입력 할 수 있도록 하는 양식이며, 주소형식이 맞지 않을 경우 에러 메세지가 나온다.

5. number : 숫자를 입력하기 위한 요소로서 직접 입력하거나 화살표 버튼을 사용하여 설정이 가능하다.

6. date : 년, 월, 일을 선택하기 위한 요소로서 클릭 시 달력창이 활성화됨

호환성이 떨어지는 편이라 잘 사용하지는 않지만, 예약 하는 사이트는 있어야함

7. color : 사용자가 원하는 색상을 고르기 위한 양식

8. progress : 진행 정도를 나타내느 바를 만드는 태그로서 max. value 속성을 사용한다.

HTML5
CSS
JAVASCRIPT