[HTML] 양식

<form> 입력받은 정보를 웹 서버로 제출

속성 action : 전송받은 정보를 처리할 URL

속성 autocomplete : 이전에 입력된 값으로 자동처리 할지 여부(자동완성기능)

속성 method : 서버로 전송할 HTTP 방식 ex)GET(default)/POST

속성 novalidate : input type form의 유효성검사를 하지 않는다. (특수 상황이나 test 할때 많이 사용)

ex) 이메일의 경우 @ . 이 들어가는 양식인지 검사함

속성 name : 브라우저가 인식할 form 이름

속성 target : 서버로부터 응답받을 방식 지정(현재 탭/새로운 탭)

<input/> 사용자에게 입력받을 양식

속성 autofocus : 페이지가 로드되자마자 자동포커스

속성 autocomplete : 이전에 입력된 값으로 자동처리 할지 여부(자동완성기능)

속성 checked : 서버로 전송할 HTTP 방식 ex)GET(default)/POST

속성 disabled : input type form의 유효성검사를 하지 않는다. (특수 상황이나 test 할때 많이 사용)

속성 form : 브라우저가 인식할 입력값 이름. 없으면 인식못해서 전달 못함

속성 list : 참조할 <datalist>의 id 속성 값

속성 max,min : (type=number) 입력 수 제한

속성 maxlength : 입력 최대 글자수 제한

속성 multiple : (type=file,email) 여러 개 입력

속성 name :

속성 placeholder : 입력할 값을 명시해주는 역할. 포커스 되기 전 표시된다.

속성 readonly :

속성 step : (type=number,range) 몇 배씩 증가할지 정의

속성 src : (type=image) URL

속성 alt : (type=image) 대체 텍스트

속성 type : 데이터 종류

속성 value : 초기값 설정

예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML Elements</title>
</head>
<body>
    <form action="/login" id="login-form" method="GET" autocomplete="off" novalidate target="_blank">
        <input type="email" name="email">
        <input type="password" name="password">
        <button type="submit">로그인</button>
    </form>
    <input type="text" form="login-form" maxlength="6"><!--form id 지정하면 태그 밖이여도 연결가능-->

    <form action="/login" method="GET">
        <input type="email" name="id"><!--name이 있어야 넘겨줄수있음-->
        <input type="password" name="pw">
        <input type="submit" value="로그인"><!--서버에 제출시 사용하는 type. button 생성-->
        <input type="reset" value="초기화"><!--from 태그 내의 값 초기화-->
    </form>
    <input type="text">

    <input type="number" value="1234" readonly disabled><br>
    <input type="number" placeholder="숫자를입력하세요!" max="8" min="4" step="2"><br>

    <input type="checkbox" checked><br>

    <input type="file" multiple><br>

    <input type="radio" name="radio"><!--하나만 선택할 때-->
    <input type="radio" name="radio" checked>
    <input type="radio" name="radio">

    <form action="/login" id="login-form">
        <input type="image" src="images/heropy.png" alt="HEROPY"><!--이미지도 제출가능-->
    </form>
</body>
</html>

<label> 라벨가능 요소 캡션.

라벨가능요소 : button, input, progress, select, textarea

속성 for :참조할 라벨 가능 요소의 id 값

ex) checkbox id값을 참조한 label 캡션으로 만든 텍스트를 눌러도 checkbox가 체크되거나,

search 를 감싼 label 캡션을 누르면 검색창에 포커스가 되는 등.

    <!--라벨 가능 요소를 참조-->
    <input type="checkbox" id="user-agreement">
    <label for="user-agreement">동의하십니까?</label>

    <!--라벨 가능 요소를 포함-->
    <label><input type="checkbox">동의하십니까?</label>

<button> 버튼 생성

속성 autofocus : 자동 포커스

속성 disabled : 비활성화

속성 form : <form>의 id 값(form태그 외부에서도 사용할 수 있게)

속성 name : 버튼 이름

속성 type : 버튼 타입 (button, reset, submit)

<textarea> '여러 줄' 일반 텍스트

속성 autocomplete : 자동완성기능(기본값 on)

속성 autofocus : 자동 포커스

속성 disabled : 비활성화

속성 form : <form>의 id 값(form태그 외부에서도 사용할 수 있게)

속성 maxlength : 입력 가능한 최대문자 수

속성 name : 버튼 이름

속성 placeholder : 입력할 값 안내

속성 readonly : 읽기전용

속성 rows : 줄 수(기본값 2)

    <input type="submit" value="제출">
    <button type="submit">제출</button>

    <button onclick="doit()">클릭하세요!</button>
    
    <script>
        function doit(){
            alert('클릭했습니다!');
        }
    </script>

    <textarea rows="6" placeholder="설명을 입력하세요!"></textarea>

<filedset> 같은 목적의 양식을 그룹화

속성 disabled : 그룹 내 모든 요소 비활성화

속성 form : 그룹이 속하는 하나 이상의 <form>의 id 값

속성 name : 그룹이름

<legend> filedset으로 그룹화 한 양식들의 제목 지정

예제

<select> option의 선택 메뉴 제공

속성 autocomplete : 자동완성기능(기본값 on)

속성 disabled : 비활성화

속성 form : <form>의 id 값(form태그 외부에서도 사용할 수 있게)

속성 multiple : 다중선택 여부

속성 name : 메뉴 이름

속성 size : 한번에 볼 수 있는 행 개수

<optgroup> option을 그룹화

속성 label : 옵션그룹 이름

속성 disabled : 옵션 그룹 비활성화

<option> 선택목록

속성 label : 옵션 제목 표시

속성 disabled : 옵션 비활성화

속성 selected : 옵션이 선택되었음을 표시

속성 value : 값

* 생략되면 포함된 텍스트로 대체 ex) <option>텍스트</option>

*빈 태그 형식으로 사용 시 label과 value 값 필수

    <select name="fruits">
        <optgroup label="내가 좋아하는 과일">
            <option label="Apple" value="Apple"></option>
            <option>Orange</option>
            <option>Banana</option>
        </optgroup>
        <optgroup label="내가 싫어하는 과일">
            <option selected>Mongo</option>
            <option>Fineapple</option>
        </optgroup>
    </select>

<datalist> input에 option의 자동완성기능 제공.

input의 list값--datalist의 id값 연결

    <input type="text" list="email">
    <datalist id="email">
        <option>naver.com</option>
        <option>daum.com</option>
        <option>nate.com</option>
    </datalist>

<progress> 작업 진행률 표시

속성 max : 작업 총량

속성 value : 작업 진행량 (값이 가변하므로 JS 많이 사용한다고 함)

↓

    <progress value="0" max="100"></progress>
    <script>
        const progress = document.querySelector('progress');
        const interval = setInterval(function(){
            progress.value += 10;
            if(progress.value >= 100) clearInterval(interval);
        },1000)
    </script>

저작자표시

'Web > HTML5' 카테고리의 다른 글

[HTML] 특수기호 출력 (0)	2020.01.21
[HTML] 전역 속성 (0)	2020.01.21
[HTML] 표 콘텐츠 (0)	2020.01.17
[HTML] 스크립트 (0)	2020.01.17
[HTML] 내장 콘텐츠 (0)	2020.01.16

'Web > HTML5' 카테고리의 다른 글

티스토리툴바