09.11(form)

form

사용자로부터 입력 받을 수 있는 HTML 입력 폼(form)을 정의할 때 사용

<form>요소는 다음과 같은 요소들을 하나 이상 포함할 수 있음

<button>

<fieldset>

<input>

<label>

<option>

<optgroup>

<select>

<textarea>

<form action="/examples/media/action_target.php">
    이름 : <input type="text" name="st_name"><br>
    학번 : <input type="text" name="st_id"><br>
    학과 : <input type="text" name="department"><br>
    <input type="submit">
</form>

 

<form>의 속성

속성	속성값	설명
action	URL	폼 데이터가 서버로 제출될 때 해당 데이터가 도착할 URL명시
autocomplete	on off	<form> 요소에서 자동 완성 기능을 사용할지 여부를 명시함
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	폼 데이터가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시함 (단, <form> 요소의 method 속성값이 “post”인 경우에만 사용할 수 있음)
method	get post	폼 데이터가 서버로 제출될 때 사용되는 HTTP 메소드를 명시함
name	텍스트	<form> 요소의 이름을 명시함
novalidate	novalidate	폼 데이터가 서버로 제출될 때 해당 데이터의 유효성을 검사하지 않음을 명시함
target	_blank _self(기본값) _parent _top	폼 데이터를 서버로 제출한 후 받는 응답이 열릴 위치를 명시함

 

작성예시

<!-- form과 input은 부모자식 관계를 가짐 -->
<h2>input태그</h2>
<form action="">
    <fieldset>
        <legend>텍스트관련</legend>  <!--이름표-->
        <label for="userName">이름</label>
        <input type="text" 
                id="userName" 
                name="userName"
                placeholder="권정렬"
                value="박보검"
                readonly>  <!--id는 고유해야함 name은 form안에서만 고유하면 됨 readonly는 읽기전용(전송은 됨)-->
        <br>
        <label for="userPwd2">패스워드</label>
        <input type="password" name="userPwd" id="userPwd2" value="1234">
        <br>
        <label for="user-search">검색</label>
        <input type="search" name="user-search" id="user-search">
        <br>
        <label for="user-email">이메일</label>
        <input type="email" name="user-eamil" id="user-email">  <!--required-->
        <br>
        <label for="user-url">홈페이지</label>
        <input type="url" name="user-url" id="user-url">
        <br>
        <label for="user-tel">전화번호</label>
        <input type="tel" name="user-tel" id="user-tel">  <!--tel로하면 숫자자판 나옴-->
        <br>
        <label for="memo">메모</label>
        <textarea name="memo" id="memo"
                    cols="30" rows="10"></textarea>
    </fieldset>

    <fieldset>
        <legend>숫자관련</legend>
        <label for="amount">수량</label>
        <input type="number" name="amount" id="amount"
                value="0" min="0" max="10" step="2">
        <br>
        <label for="point">점수</label>
        <input type="range" name="point" id="point"
                min="0" max="100" step="10">
    </fieldset>

    <fieldset>
        <legend>날짜/시간관련</legend>
        <label for="birthday">생일</label>
        <input type="date" name="birthday" id="birthday"
                value="2020-03-17">
        <br>
        <label for="delivery-time">배달시각</label>
        <input type="time" name="delivery-time" id="delivery-time">
    </fieldset>

    <fieldset>
        <legend>선택관련</legend>
        <h5>radio : 0 | 1</h5>
        성별 :
        <label for="male">남</label>
        <input type="radio" name="gender" id="mail" value="M">  <!--value까먹으면 전송시 구분이 안됨, name으로 묶기-->
        <label for="female">여</label>
        <input type="radio" name="gender" id="femail" value="F" checked>

        <h5>checkbox : 0 ~ 다수개</h5>
        <label for="basketball">농구</label>
        <input type="checkbox" name="hobby" id="basketball" value="농구" checked>
        <label for="baseball">야구</label>
        <input type="checkbox" name="hobby" id="baseball" value="야구">
        <label for="football">축구</label>
        <input type="checkbox" name="hobby" id="football" value="축구">

        <h5>select</h5>
        <label for="nation">국가</label>
        <select name="nation" id="nation" multiple>
            <option value="kor">한국</option>
            <option value="usa">미국</option>
            <option value="chn">중국</option>
        </select>

    </fieldset>

    <fieldset>
        <legend>기타태그</legend>
        <label for="upload-file">파일</label>
        <input type="file" name="upload-file" id="upload-file">
        <br>
        <label for="favoriate-color">색깔</label>
        <input type="color" name="favoriate-color" id="favoriate-color"
                disabled>
        <br>
        <!-- disabled는 화면에 노출되어도 전송되지 않지만 hidden은 화면에 안보이지만 전송됨 -->
        <label for="hidden">안보이지만 전송되는 input태그</label>
        <input type="hidden" name="test" value="123">
    </fieldset>

    <input type="submit" value="전송">
    <input type="reset" value="초기화">
</form>