폼요소

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

06. 폼요소

Info: 👁️‍🗨️ 🔗정보를 제출하기 위한 대화형 문서영역

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

ex1-24.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>폼</title>   
</head>
<body>   
    <form action="#" method="post">
        <fieldset>
            <legend>로그인</legend>
            <p>ID : <input type="text"></p>
            <p>PW : <input type="password"></p>
        </fieldset>
    </form>
</body>
</html>

07. input , type

Info: 👁️‍🗨️ 🔗입력요소

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

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

type=”chackbox” ⇒ 복수선택

ex1-25.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>폼</title>   
</head>
<body>   
    <form action="#" method="post">
        <fieldset>
            <legend>type 속성</legend>
            <p>아이디 : <input type="text"></p>
            <p>비밀번호 : <input type="password"></p>
            <p>검색 : <input type="search"></p>
            <p>이메일 : <input type="email"></p>
            <p>전화번호 : <input type="tel"></p>
            <p>컬러선택 : <input type="color"></p>
            <p>수량 : <input type="number" min="1" max="10" value="1"></p>
            <p>만족도 : <input type="range" min="1" max="10" value="1"></p>
            <p>예<input type="radio" name="receive" checked="checked"> 아니오
									<input type="radio" name="receive"></p>
            <p>html<input type="checkbox" checked="checked"> css<input type="checkbox"></p>
            <p><input type="submit" value="전송"></p>
            <p><input type="reset" value="취소"></p>
            <p><input type="button" value="확인"></p>
            <p><input type="image"  src="images/bt.png" alt="전송"></p>
            <p><input type="file"></p>                       
        </fieldset>
    </form>
</body>
</html>

08. textarea,select

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

select: 선택목록상자

1-26.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>폼</title>   
</head>
<body>   
    <form action="#" method="post">
        <fieldset>
            <legend>회원가입</legend>
            <p>가입목적 :<br><textarea rows="5" cols="100"></textarea></p>
            <p>전화번호 :               
							<select name="tel">
	                <option>----지역번호를 선택하세요----</option>
	                <option value="seoul" selected="selected">02</option>
	                <option value="gyeonggi">030</option>
	                <option value="sejong">044</option>
	            </select>
              <input type="text">
            </p>
        </fieldset>
    </form>
</body>
</html>

09. label

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

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

ex1-27.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>폼</title>
</head>
<body>
    <h1>label 요소</h1>
    <form action="#" method="post">
        <table>
            <caption>회원가입 입력</caption>
            <colgroup>
                <col>
                <col>
            </colgroup>
            <tbody>
                <tr>
                    <th scope="row"><label for="id">아이디</label></th>
                    <td><input type="text" id="id" title="아이디 입력"></td>
                </tr>
                <tr>
                    <th scope="row"><label for="pw">비밀번호</label></th>
                    <td><input type="password" id="pw" title="비밀번호 입력"></td>
                </tr>
                <tr>
                    <th scope="row"><label for="r_pw">비밀번호 재입력</label></th>
                    <td><input type="password" id="r_pw" title="비밀번호 재입력"></td>
                </tr>
                <tr>
                    <th scope="row"><label for="email">이메일</label></th>
                    <td><input type="text" id="email" title="이메일아이디 입력">@<input type="text" title="이메일주소 입력"></td>
                </tr>
                <tr>
                    <th scope="row"><label for="hp">핸드폰 번호</label></th>
                    <td>
                        <select id="hp" title="휴대폰 앞자리 선택">
                            <option>선택</option>
                            <option>010</option>
                            <option>011</option>
                        </select>-
                        <input type="text" title="휴대폰 번호 중간 4자리 입력">-
                        <input type="text" title="휴대폰 번호 끝 4자리 입력">
                    </td>
                </tr>
            </tbody>
        </table>
        <div><input type="submit" value="회원가입"><input type="reset" value="취소"></div>
    </form>
</body>
</html>

10. 폼정리

Info: 👁️‍🗨️ 🔗MDN 링크

https://caniuse.com/

**브라우저 호환성 확인**

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

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

ex1-29.html

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

<!DOCTYPE html>
<html>
	<head>
		<title>예약 문의</title>
		<meta charset="UTF-8" />
	</head>

	<body>
		<h1>예약 문의</h1>
		
		<form action="#" method="post">
			<p>
				작성자
				<input name="userName" type="text" placeholder="작성자를입력하세요" required="required" autofocus="autofocus" />
				
			</p>
			<p>
				비밀번호
				<input name="userPWD" type="password" />
			</p>
			<p>
				주민등록번호
          
				<input name="userIDNUM" type="text" pattern="\d{6}-\d{7}" />
			</p>
			<p>
				email
				<input name="userEmail" type="email" autocomplete="on" />
			</p>
			<p>
				연락처
				<input name="userPhone" type="tel" autocomplete="off" />
				
			</p>
			<p>
				투숙 날짜
				<input name="userDate" type="date" />
			</p>
			<p>
				투숙 날짜 시 분 선택할 수 있는 박스
				<input name="userDate" type="datetime-local" />
			</p>
			<p>
				년과 월
				<input name="userDate" type="month" />
			</p>
			<p>
				주
				<input name="userDate" type="week" />
			</p>
			<p>
				시 분을 선택
				<input name="userDate" type="time" />
			</p>
			<p>
				color
				<input name="userDate" type="color" />
			</p>
			<p>
				투숙 인원
				<input name="userNumber" type="number" value="1" />
			</p>
			<p>
				제목
				<input name="userTitle" type="text" />
			</p>
			<p>
				검색 박스로 텍스트 입력 시 지우기 버튼이 나타납니다.
				<input name="userSearch" type="search" />
			</p>
			<p>
				url
				<input name="userTitle" type="url" />
			</p>
			<p>
				range 숫자 범위가 슬라이드 바로 나타납니다
				<input name="userTitle" type="range" />
			</p>
			<p>
				작성자의 신원을 파악하기 위한 사진을 올려주세요.<br />
				<input name="userFile" type="file" multiple="multiple"/>
				<input name="userFile1" type="file"/>
			</p>
			<p>disabled 속성과 readonly (input 요소의 값이 변경되지 않은 채 폼 전송이 되어야 하는 곳에 사용)속성</p>
			<ul>
				<li>
					<label for="serialNum">시리얼 번호 입력 :</label> <input type="text" id="serialNum" /><input type="button" value="이전" /> <input type="button" value="다음" disabled="disabled" />
					
				</li>
				<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>
				
			</ul>
			<input type="submit" />
		</form>
		<p>autocomplete - 자동완성 기능에 대한 사용 여부를 판단해줍니다.</p>
	</body>
</html>

11. 과제

사용이미지

😋 문제1 텍스트

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

😋 문제2

member login 타이틀은 빼고 하세용

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

<style>
    table,
    th,
    td {
      border: 1px solid;
    }
  </style>

이거하지마

😅추가문제 1

HTML 미리보기

😅추가문제 2

폼요소