HTML 폼 구성하기

HTML 폼은 다양한 종류의 입력 필드와 함께 구성될 수 있습니다. 사용자가 제출할 수 있는 데이터의 유형과 양식에 따라 다양한 입력 필드를 사용할 수 있습니다. 예를 들어, 텍스트 입력 필드는 사용자로부터 이름, 이메일, 주소 등의 텍스트 정보를 입력받을 수 있으며, 숫자 입력 필드는 숫자 값(예: 나이, 수량)을 입력받을 수 있습니다, 또한, HTML 폼은 체크박스와 라디오 버튼과 같은 선택적 입력 요소를 제공하여 사용자가 여러 옵션 중에서 선택할 수 있도록 합니다. 체크박스는 여러 항목을 복수로 선택할 수 있도록 하고, 라디오 버튼은 여러 항목 중에서 하나를 선택할 수 있도록 합니다.

• form태그 (폼 양식을 의미하는 태그, action과 method 속성을 함께 사용)
• input태그 (로그인 페이지의 아이디 와 비밀번호 처럼 입력 받는 요소를 생성할 때 사용 – type,name,value속성이 있는데 type속성은 필수로 사용하여야 한다.)
• label태그 (form태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용)
• textarea태그 (여러 줄의 입력 요소를 생성할 때는 input태그가 아닌 textarea태그를 사용)
• select,option,optgroup태그 (select태그를 사용하면 콤보박스 를 생성할 수 있음, 콤보박스 에 항목 하나 추가 할 때 option태그를 사용하고, 항목들을 그룹으로 묶고 싶을 때 optgroup태그 사용)
• button태그 (input태그에서 type속성값을 submit,reset,button으로 지정해 생성할 수 있음, 별도의 button태그로 생성할 수도 있음)

<!-- 형식 <input type = "종류" name = "이름" value = "초깃값"> -->
<!-- input태그로 생성할 수 있는 입력 요소와 type 속성값 -->
<input type = "text">
<input type = "password">
<input type = "tel">
<input type = "number">
<input type = "url">
<input type = "search">
<input type = "email">
<input type = "checkbox">
<input type = "radio">
<input type = "file">
<input type = "button">
<input type = "image" src = "./이미지경로">
<input type = "hidden">
<input type = "date">
<input type = "datetime-local">
<input type = "month">
<input type = "week">
<input type = "range">
<input type = "color">
<input type = "submit">
<input type = "reset">

<!-- label태그는 사용하는 방법에 따라 암묵적인 방법, 명시적인 방법으로 -->
<!-- 암묵적인 방법 label태그에 상호작용 요소 포함. -->
<label>
    아이디
    <input type = "text">
</label>

<!-- 명시적인 방법 label태그와 for속성과 상호작용 요소인 id속성을 같은 값으로 설정 -->
<label for = "usepw">비밀번호</label>
<input type = "password" id = "wsepw">
<!-- for 속성과 id 속성값이 같아야 함. -->

<!--형식 <form action="#">
              <fieldset>
                <legend>그룹 이름</legend>
                상호작용 요소 생략
              </fieldset>
             </form> -->
<form>
    <fieldset>
        <legend>기본 정보</lengend>
        <p>
            <label for = "userid">아이디</label>
            <input type = "text" id = "userid">
        </p>
        <p>
            <label for = "passwd">비밀번호</label>
            <input type = "text" id = "passwd">
        </p>
    </fieldset>
    <fieldset>
        <legend>선택 정보</lengend>
        <p>
            <label for = "age">나이</label>
            <input type = "number" id = "age">
        </p>
        <p>
            <label for = "recomender">추천인</label>
            <input type = "text" id = "recomender">
        </p>
    </fieldset>
</form>

<!-- 형식 <textarea>초깃값</textarea> -->
<!-- input태그와 다르게 닫는 태그가 있음. -->
<form action = "#" method = "post">
    <fieldset>
        <legend>블로그 글쓰기</legend>
        <p>
            <label for = "title">제목
                <input type = "text" id = "title" name = "title">
            </label>
        </p>
        <p>
            <label for = "desc">내용
               <textarea id = "desc" name = "desc"></textarea>
            </label>
        </p>
    </fieldset>
</form>

<!--형식 <select>
              <optgroup label="그룹 이름">
                <option value="서버에 전송할 값">웹 브라우저에 표시할 값</option>
              </optgroup>
             </select> -->
<select name="city" id="city">
        <option value="강북구">강북구</option>
        <option value="강남구">강남구</option>
        <option value="서초구">서초구</option>
        <option value="중원구">중원구</option>
        <option value="분당구">분당구</option>
    </select>
    <select name="city" id="city">
        <optgroup label="서울시">
            <option value="강북구">강북구</option>
            <option value="강남구">강남구</option>
            <option value="서초구">서초구</option>
        </optgroup>
        <optgroup label="경기도 성남시">
            <option value="중원구">중원구</option>
            <option value="분당구">분당구</option>
        </optgroup>
    </select>

    <!-- size속성은 콤보박스 화면에 노출되는 항목갯수 지정, 생략할 경우 기본1개 -->
    <select name="city" id="city" size="3">
        <option value="강북구">강북구</option>
        <option value="강남구">강남구</option>
        <option value="서초구">서초구</option>
        <option value="중원구">중원구</option>
        <option value="분당구">분당구</option>
    </select> 

    <!-- 다중선택 가능한 multiple속성 -->
    <select name="city" id="city" multiple>
        <option value="강북구">강북구</option>
        <option value="강남구">강남구</option>
        <option value="서초구">서초구</option>
        <option value="중원구">중원구</option>
        <option value="분당구">분당구</option>
    </select>

    <!-- 콤보박스 첫 번재 option태그의 값이 기본선택인데, selected속성 사용하면 기본선택 화면 변경가능 -->
    <select name="city" id="city">
        <option value="강북구">강북구</option>
        <option value="강남구">강남구</option>
        <option value="서초구" selected>서초구</option>
        <option value="중원구">중원구</option>
        <option value="분당구">분당구</option>
    </select>

<!--형식 <button type = "종류">버튼 내용</button> -->
<button type = "submit">
    <img src = "이미지경로" alt = "이미지설명">
    페이스북에 등록하기
</button>

<!--형식 <태그 checked> -->
<fieldset>
    <legend>좋아하는 과일</legend>
    <input type="checkbox" id="banana" name="banana" value="banana">
    <label for="banana">banana</label><br>
    <input type="checkbox" id="apple" name="apple" value="apple">
    <label for="apple">apple</label><br>
    <input type="checkbox" id="ornage" name="ornage" value="ornage">
    <label for="ornage">ornage</label>
</fieldset>

<!--형식 <태그 disabled>, 서버로 값 전송x -->
<input type="text" disabled>
<button type="button" disabled>비활성</button>

<!--형식 <태그 readonly> 서버로 값 전송o-->
<input type="password" readonly>
<textarea readonly></textarea>

<!--형식 <태그 maxlength="숫자"> -->
<input type="url" maxlength="4">
<textarea maxlength="4"></textarea>

<!--형식 <input placeholder="입력값에 대한 힌트"> -->
<input type="tel" placeholder="전화번호를 입력해 주세요.">