[HTML] 폼 태그 | input 태그 | label 태그

폼(form) 태그

폼? 사용자가웹 사이트로 정보를 보낼 수 있는 요소들

(텍스트 입력란, 비밀번호 입력란, 버튼 및 체크 박스 등)컨테이너

<form> 태그? 폼 만들기

<form [속성="속성 값"]> 여러 폼 요소 </form>

 

폼 액서스? 입력 내용을 그룹화한 뒤 작은 배송 라벨을 붙여 어떤 지정된 목적지로 함께 제출

 

폼 안에 버튼이 있으면 기본 값으로 해당 폼을 제출하게 된다. 하지만 옵션이 있다. <input>의 type처럼 type이라는 속성을 내보낸다. (<input>의 속성과 옵션은 값이 다르다.) 

 

<form>태그- 폼 만들기

<form> 태그  폼을 만드는 가장 기본적인 태그로 <form>태그와 </form> 태그 사이에 여러 폼 요소와 관련된 태그를 넣는다.

<form [속성="속성 값"]> 여러 폼 요소</form>

 

검색 창을 만드는 폼

<form action="search.php" method="post">

    <input type="text" title="검색">

    <input type="submit" value="검색">

</form>

 

method 속성? 사용자가 입력한 내용들을 서버 쪽  프로그램으로 어떻게 넘겨줄 지 지정

method 속성의 속성값 get, post

속성 값 get? 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다.

속성 값 post? 대부분 이 방식을 사용한다. 사용자가 입력한 내용이 드러나지 않는다.

name 속성? 폼의 이름을 지정, 여러개의 <form>태그가 있을때 폼들을 구분하기 위해 사용

action 속성? <form> 태그 안의 내용들을 처리해 줄 서버 상의 프로그램 지정

→ 폼이 제출되었을 때, 데이터를 보낼 위치와 시간을 이 속성이 지정한다.

target 속성? action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 지정

 

autocomplete 속성? 자동 완성 기능

                                   기본 값 on (off도 가능)

<form action="register.php" autocomplete="off">

</form>

 

<form>
    <h3>
        수강 분야(다수 선택 가능)
    </h3>
    <ul>
        <li><input type"checkbox" value="grm">문법</li>
        <li><input type"checkbox" value="wr">작문</li>
        <li><input type"checkbox" value="rd">독해</li>
    </ul>
    <ul>
        <h3>
        <li>
            <label><input tyoe="radio" name="subjext" value="eng"> 영어회화</label>
        </li>
        <li>
            <label><input tyoe="radio" name="subjext" value="ch"> 중국어회화</label>
        </li>
        <li>
            <label><input tyoe="radio" name="subjext" value="jp"> 일어회화</label>
        </li>
    </h3>
    </ul>
</form>

 <input> 태그? 폼에서 사용자 입력을 받기 위해 사용하는 태그 

• 닫는 태그가 없다.
• 두 태그 사이에 내용을 넣지 않는다.

가장 중요한 속성은 type, placeholder이다.

placehoder? 입력란의 임시 텍스트를 지정하는 속성 → 창에 뭔가 입력하기 전 비어 있는 경우 보이는 텍스트  

 

<input type="유형" [속성 = "속성 값"]>

 

<input> 태그 - 입력 항목 만들기

사용자가 내용을 입력하는 부분은 한 줄짜리 텍스트나 비밀번호 같은 부분인데 이런 부분을 만들 때 사용하는 태그

체크박스나 로그인 버튼처럼 사용자가 클릭하는 버튼도 <input>태그를 이용

<input type="유형" [속성="속성 값"]>

 

type="hidden" - 히든 필드 만들기

히든 필드는 화면상의 폼에는 보이지 않지만 사용자가 입력을 마치고 폼을 서버로 전송할때 서버로 함께 전송되는 요소입니다.

<input type="hidden" name="이름" value="서버로 넘길 값">

 

type="text" - 텍스트 필드 만들기

텍스트 필드는 한 줄짜리 입반 텍스트를 입력하는 필드입니다.

<input type="text" [속성 = "속성 값"]>

 

type="password" - 비밀번호 입력란 만들기

"text"타입이 아이디 입력란을 만들었다면 "password"는 말 그대로 비밀번호 입력란을 만듭니다.

<input type="password" [속성="속성 값"]>

 

<form>
    <fieldset>
        <label>아이디: <input type="text" id="user_id" size="10"></label>
        <label>비밀번호: <input type="password=user_pw" size="10"></label>
        <input type="submit" value="로그인">
    </fieldset>
</form>

 type="search", type"url", type"email", type="tel" -분화된 텍스트 필드

type="search" - 검색 상자 만들기

밑 소스로 검색 필드를 넣은 후 웹 브라우저에서 확인하면 일반 텍스트 상자를 넣은 것과 똑같아 보입니다.

<input type="search">
<input type="submit" value="검색">

<input type="search" [속성="속성 값"]>

type="url" - url 입력란 만들기

웹 주소도 텍스트 필드에서 분화되어 type으로 별도로 지정됩니다.

<input type="url" [속성="속성 값"]>

위와 같은 소스에서는 반드스 http://로 시작하는 주소를 입력해야합니다. 

type="email"-메일 주소 입력란 만들기

type="email"로 지정하면 브라우저 자체에서 사용자가 이볅한 내용이 메일 주소 형식에 맞는지 자동으로 체크해줍니다.

<input type="email" [속성="속성 값">

type="tel" - 전화번호 입력란 만들기

전화번호는 지역마다 형식이 다르기 때문에 사용자가 입력한 값을 체크하지 않고

사용자가 입력한 정보가 일반 텍스트가 아니라 전화번호 라는 사실을 인식합니다.

 

type="numebr" -  숫자 입력하기

<input type="numebr" [속성="속성 값"]>

 

 type="range" → range 입력은 슬라이더를 만들어서 사용자가 그 범위 내에서 그 값을 선택하는 것

•  슬라이드 막대로 숫자 지정하는 것
• 최소값과 최대값을 조정 가능

 

<input type="range" [속성="속성 값"]>

<ul>
    <li>
        <label class="reg" for="member">참여인원<small>(최대 10명)</small></label>
        <input type="number" id="member" value="1" min="0" max="0" step="1">
    </li>
    <li>
        <label class="reg" for="stuffs">지원물품<small>(1인당 5개)</small></label>
        <input type="number" id="stuffs" value="1" min="0" max="5" step="5">
    </li>
    <li>
        <label class="reg" for="satis">희망 단계<small>(상, 중, 하)</small></label>
        <input type="range" id="satis" value="1" min="1" max="3">
    </li>
 </ul>

type="radio", type="checkbox" - 라디오 버튼과 체크박스 넣기

<input type="radio" [속성="속성 값"]> -> 

<input type="checkbox" [속성="속성 값"]>

<fieldset>
    <legend>신청 과목</legend>
    <p>이 달에 신청할 과목을 선택하세요.</p>
    <label><input type="radio" name="subject" value="speaking>회화</label>
    <label><input type="radio" name="subject" value="grammar">문법</label>
    <label><input type="radio" name="subject" value="value">작문</label>
</fieldset>
<fieldset>
    <legend>
        메일링
    </legend>
    <p>메일로 받고 싶은 뉴스 주제를 선택해 주세요(복수 선택 가능)</p>
    <label><input type="checkbox" name="mailing1" value="news">해외 당신</label>
    <label><input type="checkbox" name="mailing2"value="dialog">5분 회화</label>
    <label><input type="checkbox" name="mailing3" value="pops">모닝 팝스<label></label>
</fieldset>

type="color" - 색상 선택 상자 표시하기

color필드는 색상표에서 사용자가 색상을 선택할 수 있게 해준다.

<input type="color" [value="기본 색" [속성="속성 값"]>

 

type="date", type="month", type="week" - 날짜 표시하기

웹 문서, 앱에 달력을 표시하고 싶으면 type="date" / type="month" / type="week" 를 이용하면 된다.

 

<fieldset> 태그, <legend> 태그? 폼 요소 그룹 묶기

<fieldset> 태그? 태그 사이의 폼들을 하나의 영역으로 묶고 외곽선을 그려준다.

<legend> 태그? <fieldset> 태그로 묶은 그룹에 제목을 붙여준다.

<fieldset [속성 = "속성 값"]></fieldset>

 

 

<label> 태그 - 폼 요소에 레이블 붙이기

<label> 태그? 폼 요소에 레이블 붙이는 것

레이블(label)? ID 혹은 PW처럼 붙여 놓은 텍스트를 의미

<label [속성="속성 값"]> 레이블 <input...> </label>

또는

<label for="이름">레이블</label>

<input id="id이름" [속성 = "속성 값"]></label>

 

---

<select> → 상위 요소

여러 <option>을 한 그룹으로 묶는다.

label을 하려고 <select>에 name하고 id를 넣는다. 

<select> 내에서 <option>사용하는 것이 핵심

 

 Form 유효성 검사 

유효성 검사는 일반적으로 제한을 추가하거나 사용자 입력 또는 데이터의 유효성을 확인하는 것