HTML5 - 190602 Basic Study 5

1. 명시적 기법 / 묵시적 기법

<form>
   <!--fieldset 기본값은 100%-->
   <fieldset style="width:500px">
       <legend>필수 입력 사항</legend>
        <!--명시적 기법(권장)-->
        <label for="name"> 이름 : </label> <input type="text" id="name" size="10" value="홍길동"><br>
        <label for="id"> 아이디 : </label> <input type="text" id="id" size="10" placeholder="영문숫자로만입력해주세요" required><br>
        <!--묵시적 기법-->
        <label>
        비밀번호 : <input type="password" size="10" required>
        </label>
    </fieldset>
</form>

2. 입력 양식 태그 1

<form>
    <fieldset style="width:500px">
       <legend>선택 입력 사항</legend>
        당신의 성별은?
        <label>남성 <input type="radio" name="sex" checked></label>
        <label>여성 <input type="radio" name="sex"><br></label>

        취미가 무엇입니까?
        <label>축구<input type="checkbox" checked></label>
        <label>바둑<input type="checkbox"></label>
        <label>인터넷<input type="checkbox"></label>
        <label>게임<input type="checkbox"></label><br>

        E-Maill    <input type="text">@
        <select>
            <option>daum.net</option>
            <option selected>naver.com</option>
            <option>google.com</option>
        </select>

    </fieldset>
</form>

3. 파일 입력 양식 태그

<form>
이력서 제출 <input type="file"><br>
</form>

4. select 선택 양식 태그

<form>
당신의 신발사이즈는?<br>
    <select multiple size="8" style="overflow:hidden">
       <optgroup label="남성용">
           <option>250mm</option>
            <option selected>265mm</option>
            <option>270mm</option>
            <option>275mm</option>
        </optgroup>
        <optgroup label="여성용">
            <option>220mm</option>
            <option>225mm</option>
            <option>230mm</option>
            <option>235mm</option>
        </optgroup>
    </select><br>
</form>

select 태그 속성>

1) select : 선택 양식 생성

2) optgroup : 그룹화

3) option : 옵션 생성

5. textarea 입력 태그

<form>
자기소개 및 남기고 싶은 말<br>
    <textarea cols="30" rows="10" style="resize:none">하고싶은말</textarea><br>

    <input type="submit" value="회원가입">
    <input type="reset" value="취소">
</form>

두 줄 이상의 글자를 입력할 때 사용

6. HTML 5 신규 입력 양식 태그

<form>
    색상 선택하기 <input type="color"><br>
    날짜 <input type="date"><br>
    날짜 <input type="datetime"><br>
    이메일 <input type="email"><br>
    월 <input type="month"><br>
    숫자 <input type="number"><br>
    범위선택 <input type="range"><br>
    전화번호 <input type="tel"><br>
    주소 <input type="url"><br>
    주선택 <input tyep="week"><br>
</form>

7. submit 입력 태그

<form action="http://www.daum.net">

   만든이 <input type="text" readonly value="안기웅"><br>
   이름 <input type="text" required><br>
   아이디 <input type="text" autofocus><br>
    비밀번호 <input type="password" minlength="4" maxlength="12" title="다시입력해주세요"><br>

    <input type="submit">

</form>

8. patten 입력 태그

<form>

    <fieldset>

      <legend>pattern 속성</legend>
        <p><label for="tel">휴대폰 번호 : </label>
            <input type="tel" id="email" pattern="\d{3}-\d{3,4}-\d{4}"
                   title="휴대폰 번호는 3자리 숫자-3자리에서 4자리 숫자-4자리 숫자로 입력하셔야 합니다." /></p>
        <p><input type="submit" value="전송" /></p>

       당신의 연령대는? <input type="number" value="10" min="10" max="100" step="10">

        주로 사용하는 웹 브라우저는? <input type="text" list="browser">
        <datalist id="browser">
           <option value="익스플로러"></option>
            <option value="구글크롬"></option>
            <option value="파이어폭스"></option>
        </datalist>

    </fieldset>

</form>

7, type 속성

1) button : 버튼

2) checkbox : 체크박스

3) file : 파일 입력 양식

4) hidden : 숨기기

5) image : 이미지 형태

6) password : 비밀번호 입력 양식(* 로 표기)

7) radio : 라디오 버튼

8) reset : 초기화 버튼

9) submit : 제출 버튼

10) text : 글자 입력 양식