09 폼요소

06. 폼요소

정보

태그	설명	속성(특성)
form	입력양식 태그	action: data 를 전송할 서버주소
method: data 전송방법(get, post)
fieldset	form 요소를 그룹핑
legend	fieldset의 제목

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>폼</title>
6
</head>
7
<body>
8
    <form action="#" method="post">
9
        <fieldset>
10
            <legend>로그인</legend>
11
            <p>ID : <input type="text"></p>
12
            <p>PW : <input type="password"></p>
13
        </fieldset>
14
    </form>
15
</body>
16
</html>

07. input , type

정보

👁️‍🗨️ 🔗입력요소

정보

👉 value=“데이터값” name=“백단용 데이터 식별자” id=“디자인용 식별자” → 유일값

정보

💡 type=”radio” ⇒ 여러개 중에 하나 (택일)

type=”chackbox” ⇒ 복수선택

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>폼</title>
6
</head>
7
<body>
8
    <form action="#" method="post">
9
        <fieldset>
10
            <legend>type 속성</legend>
11
            <p>아이디 : <input type="text"></p>
12
            <p>비밀번호 : <input type="password"></p>
13
            <p>검색 : <input type="search"></p>
14
            <p>이메일 : <input type="email"></p>
15
            <p>전화번호 : <input type="tel"></p>
16
            <p>컬러선택 : <input type="color"></p>
17
            <p>수량 : <input type="number" min="1" max="10" value="1"></p>
18
            <p>만족도 : <input type="range" min="1" max="10" value="1"></p>
19
            <p>예<input type="radio" name="receive" checked="checked"> 아니오
20
                  <input type="radio" name="receive"></p>
21
            <p>html<input type="checkbox" checked="checked"> css<input type="checkbox"></p>
22
            <p><input type="submit" value="전송"></p>
23
            <p><input type="reset" value="취소"></p>
24
            <p><input type="button" value="확인"></p>
25
            <p><input type="image"  src="images/bt.png" alt="전송"></p>
26
            <p><input type="file"></p>
27
        </fieldset>
28
    </form>
29
</body>
30
</html>

08. textarea,select

정보

👁️‍🗨️ textarea: 여러줄 텍스트 입력상자

select: 선택목록상자

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>폼</title>
6
</head>
7
<body>
8
    <form action="#" method="post">
9
        <fieldset>
10
            <legend>회원가입</legend>
11
            <p>가입목적 :<br><textarea rows="5" cols="100"></textarea></p>
12
            <p>전화번호 :
13
              <select name="tel">
14
                  <option>----지역번호를 선택하세요----</option>
15
                  <option value="seoul" selected="selected">02</option>
16
                  <option value="gyeonggi">030</option>
17
                  <option value="sejong">044</option>
18
              </select>
19
              <input type="text">
20
            </p>
21
        </fieldset>
22
    </form>
23
</body>
24
</html>

09. label

정보

👁️‍🗨️ 사용자 인터페이스항목의 설명

인풋요소 의 범위지정
- 범위지정방법
  - 태그를 감싸기
  - for , id 로 연결시키기
접근성기술

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>폼</title>
6
</head>
7
<body>
8
    <h1>label 요소</h1>
9
    <form action="#" method="post">
10
        <table>
11
            <caption>회원가입 입력</caption>
12
            <colgroup>
13
                <col>
14
                <col>
15
            </colgroup>
16
            <tbody>
17
                <tr>
18
                    <th scope="row"><label for="id">아이디</label></th>
19
                    <td><input type="text" id="id" title="아이디 입력"></td>
20
                </tr>
21
                <tr>
22
                    <th scope="row"><label for="pw">비밀번호</label></th>
23
                    <td><input type="password" id="pw" title="비밀번호 입력"></td>
24
                </tr>
25
                <tr>
26
                    <th scope="row"><label for="r_pw">비밀번호 재입력</label></th>
27
                    <td><input type="password" id="r_pw" title="비밀번호 재입력"></td>
28
                </tr>
29
                <tr>
30
                    <th scope="row"><label for="email">이메일</label></th>
31
                    <td><input type="text" id="email" title="이메일아이디 입력">@<input type="text" title="이메일주소 입력"></td>
32
                </tr>
33
                <tr>
34
                    <th scope="row"><label for="hp">핸드폰 번호</label></th>
35
                    <td>
36
                        <select id="hp" title="휴대폰 앞자리 선택">
37
                            <option>선택</option>
38
                            <option>010</option>
39
                            <option>011</option>
40
                        </select>-
41
                        <input type="text" title="휴대폰 번호 중간 4자리 입력">-
42
                        <input type="text" title="휴대폰 번호 끝 4자리 입력">
43
                    </td>
44
                </tr>
45
            </tbody>
46
        </table>
47
        <div><input type="submit" value="회원가입"><input type="reset" value="취소"></div>
48
    </form>
49
</body>
50
</html>

10. 폼정리

정보

👁️‍🗨️ 🔗MDN 링크

https://caniuse.com/

개발 해야하는 브라우저의 버전을 확인후 호환되는 태그로 마크업해야 한다.

placeholder	입력힌트
required	필수입력
autocomplete	자동완성	on,off
pattern	정규식 판단
disabled	비활성화
readonly	읽기전용	input:text 에만 적용가능
사용자가 value 변경불가

교재 ex1-28~ex1-33 예제 통합

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <title>예약 문의</title>
5
    <meta charset="UTF-8" />
6
  </head>
7

8
  <body>
9
    <h1>예약 문의</h1>
10

11
    <form action="#" method="post">
12
      <p>
13
        작성자
14
        <input name="userName" type="text" placeholder="작성자를입력하세요" required="required" autofocus="autofocus" />
15

16
      </p>
17
      <p>
18
        비밀번호
19
        <input name="userPWD" type="password" />
20
      </p>
21
      <p>
22
        주민등록번호
23

24
        <input name="userIDNUM" type="text" pattern="\d{6}-\d{7}" />
25
      </p>
26
      <p>
27
        email
28
        <input name="userEmail" type="email" autocomplete="on" />
29
      </p>
30
      <p>
31
        연락처
32
        <input name="userPhone" type="tel" autocomplete="off" />
33

34
      </p>
35
      <p>
36
        투숙 날짜
37
        <input name="userDate" type="date" />
38
      </p>
39
      <p>
40
        투숙 날짜 시 분 선택할 수 있는 박스
41
        <input name="userDate" type="datetime-local" />
42
      </p>
43
      <p>
44
        년과 월
45
        <input name="userDate" type="month" />
46
      </p>
47
      <p>
48
        주
49
        <input name="userDate" type="week" />
50
      </p>
51
      <p>
52
        시 분을 선택
53
        <input name="userDate" type="time" />
54
      </p>
55
      <p>
56
        color
57
        <input name="userDate" type="color" />
58
      </p>
59
      <p>
60
        투숙 인원
61
        <input name="userNumber" type="number" value="1" />
62
      </p>
63
      <p>
64
        제목
65
        <input name="userTitle" type="text" />
66
      </p>
67
      <p>
68
        검색 박스로 텍스트 입력 시 지우기 버튼이 나타납니다.
69
        <input name="userSearch" type="search" />
70
      </p>
71
      <p>
72
        url
73
        <input name="userTitle" type="url" />
74
      </p>
75
      <p>
76
        range 숫자 범위가 슬라이드 바로 나타납니다
77
        <input name="userTitle" type="range" />
78
      </p>
79
      <p>
80
        작성자의 신원을 파악하기 위한 사진을 올려주세요.<br />
81
        <input name="userFile" type="file" multiple="multiple"/>
82
        <input name="userFile1" type="file"/>
83
      </p>
84
      <p>disabled 속성과 readonly (input 요소의 값이 변경되지 않은 채 폼 전송이 되어야 하는 곳에 사용)속성</p>
85
      <ul>
86
        <li>
87
          <label for="serialNum">시리얼 번호 입력 :</label> <input type="text" id="serialNum" /><input type="button" value="이전" /> <input type="button" value="다음" disabled="disabled" />
88

89
        </li>
90
        <li><label for="book">선택한 책 : </label> <input type="text" id="book" value="반응형 웹" readonly="readonly" /> <label for="number">수량 : </label><input type="number" id="number" value="1" /></li>
91

92
      </ul>
93
      <input type="submit" />
94
    </form>
95
    <p>autocomplete - 자동완성 기능에 대한 사용 여부를 판단해줍니다.</p>
96
  </body>
97
</html>

11. 과제

사용이미지

😋 문제1 텍스트

한방 샴푸 레시피
레시피 재료
재료  첨가량  48시간  대체재료
수상층  로즈마리 추출물  30g  증류수
네틀추출물  30g
증류수  90g
폴리쿼터  1.5g  쟁탄검
글리세린  10g  히아루론산 10g6
계면
활성제  LES/ CDE  180g / 10g  CDE + LES
코코베타인  5g  X
애플 계면 활정제  10g  올리브 계면 활성제
좋은 향을 위해서면 엘라스틴향 사용 추천

😋 문제2

member login 타이틀은 빼고 하세용

😋 문제3 테이블로 이력서 만들어오기

1
<style>
2
    table,
3
    th,
4
    td {
5
      border: 1px solid;
6
    }
7
  </style>

😅추가문제 1

HTML 미리보기