HTML 입력양식 - FORM Chapter 3 Part 3 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역 구역을 추가하려면 슬라이드를 마우스 오른쪽 단추로 클릭하십시오. 구역을 사용하면 슬라이드를 쉽게 구성할 수 있으며, 여러 작성자가 원활하게 협력하여 슬라이드를 작성할 수 있습니다. 메모 설명을 제공하거나 청중에게 자세한 내용을 알릴 때 메모를 사용합니다. 프레젠테이션하는 동안 프레젠테이션 보기에서 이러한 메모를 볼 수 있습니다. 글꼴 크기에 주의(접근성, 가시성, 비디오 테이프 작성, 온라인 재생 등에 중요함) 배색 그래프, 차트 및 텍스트 상자에 특히 주의를 기울이십시오. 참석자가 흑백이나 회색조로 인쇄할 경우를 고려해야 합니다. 테스트로 인쇄하여 흑백이나 회색조로 인쇄해도 색에 문제가 없는지 확인하십시오. 그래픽, 테이블 및 그래프 간결하게 유지하십시오. 가능한 일관되고 혼란스럽지 않은 스타일과 색을 사용하는 것이 좋습니다. 모든 그래프와 표에 레이블을 추가합니다. Chapter 3 Part 3
HTML 입력 양식 사용자로부터 정보를 입력받아 서버로 보낼 때, 사용한다.
입력 양식의 작동 방식
입력양식 - <form> 태그
간단한 입력 양식 <form method=get action=“form-1.php”> 아이디: <input type=text name=id> <br> 암 호: <input type=password name=passwd> <input type=submit value=SEND> </form>
method – GET or POST GET 방식은 입력내용을 URL 주소에 붙여서 전달
method – GET or POST POST 방식은 입력내용을 HTTP Request header에 붙여서 전달-URL 주소에서는 안보임
입력 태그 - <input> 요소 가장 자주 사용하는 입력 요소 type 속성으로 텍스트, 암호, 이메일 등을 입력받는다.
입력 태그 - <select> 요소 full-down 메뉴로 선택하는 입력 요소
입력 태그 - <textarea> 요소 게시판과 같이 장문의 글을 입력받을 때 사용
입력 태그 - <button> 요소
<input> 요소의 type – 1부 type=text: one-line 텍스트를 입력받을 때 type=password: 암호를 입력받을 때 type=submit: 입력받은 내용을 서버로 전송 type=reset: 입력 내용을 초기화 type=button: 단추 생성 <button> 태그와 비슷
예제 - /practice/0321/form-input.html <!DOCTYPE html> <html> <body> <form action="form1.php"> First name:<br> <input type="text" name="firstname" size=20> <br> Last name:<br> <input type="text" name="lastname" size=10 > <br><br> <input type="submit" value="Submit"> <input type="reset"> </form> <p>If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.</p> </body> </html>
결과
checked 속성은 default로 선택되는 것을 지정 type=radio 만들기 radio는 여러 개 중에서 1개 선택 type=radio로 지정하고 name 속성은 같은 이름을 지정한다. value 속성은 서버로 넘어갈 때의 값을 지정 checked 속성은 default로 선택되는 것을 지정
type=radio – /practice/0321/form-input.html (계속) <!DOCTYPE html> <html> <body> <p>내가 사용하는 통신사는? (하나만 고르시오)</p> <form action="form2.php"> <input type="radio" name="company" value="SKT" checked>SK telecom<br> <input type="radio" name="company" value="KT">KT olleh<br> <input type="radio" name="company" value="LGU+">LG U plus<br><br> <input type="radio" name="company" value="other">기타<br><br> <input type="submit" value="OK"> </form> </body> </html>
결과
type=checkbox 만들기 checkbox는 여러 개 선택가능 type=checkbox로 지정하고 name 속성은 다른 이름을 지정한다. value 속성은 서버로 넘어갈 때의 값을 지정
type=checkbox – /practice/0321/form-input.html (계속) <!DOCTYPE html> <html> <body> <p>내가 본 영화는? (모두 고르시오)</p> <form action="form3.php"> <input type="checkbox" name="movie1" value="jaesim">재심<br> <input type="checkbox" name="movie2" value="haebing">해빙<br> <input type="checkbox" name="movie3" value="beauty">미녀와야수<br> <input type="checkbox" name=“movie4" value="prison">프리즌 <br><br> <input type="submit" value="OK"> </form> </body> </html>
결과
풀다운 메뉴 – <select> 요소 <p>내가 사고 싶은 자동차 브랜드는?</p> <form action=“action.php”> <select name="cars"> <option value="bmw">BMW</option> <option value="benz">Benz</option> <option value="hyundai" selected>현대자동차</option> <option value="kia">기아자동차</option> </select> </form>
풀다운 메뉴 - <select>, <option> 풀다운 메뉴를 만들 때는 <select> … </select> 사용 각 항목은 <option> … </option>으로 추가 가능 <select name=“변수명”>으로 스크립트 파일에서사용할 변수 이름 지정 <option value=“값”>으로 스크립트 파일에서 저장될 변수의 값 지정 <option value=“값”>설명</option>에서는 웹페이지에서 보여지는 설명 삽입 <option value=“값” selected>설명</option>은 디폴트로 선택되는 항목 지정
예제 - /practice/0323/form-select.html <!DOCTYPE html> <html> <body> <p>내가 사고 싶은 자동차 브랜드는?</p> <form action=“action.php”> <select name="cars" height=20> <option value="bmw">BMW</option> <option value="benz">Benz</option> <option value="hyundai" selected>현대자동차</option> <option value="kia">기아자동차</option> </select> </form> </body> </html>
텍스트 입력 - <textarea> 요소 여러 줄의 텍스트를 입력받을 때 사용 행과 열의 수를 지정할 수 있다. <textarea name=“이름” rows=“값” cols=“값”> </textarea>
예제 - /practice/0323/form-textarea.html <!DOCTYPE html> <html> <body> <form action=“action.php”> <p>고객의 의견</p> <textarea name=opinion rows=5 cols=50> </textarea> </form> </body> </html>
결과
<input> 태그의 속성-각 링크를 직접 실습 Attribute Value Description autocomplete on off 자동 완성 on/off autofocus 웹페이지 로드시 커서가 자동으로 위치 maxlength number 입력되는 문자의 최대 길이 지정 name text 입력받은 내용을 저장할 변수 이름 placeholder 입력란에 안내문 표시 required 반드시 채워져야 하는 입력란 size 입력란의 크기 지정 value 입력란에 값 지정
입력 요소 묶기- <fieldset> 태그 <form> <fieldset> <legend>인적사항입력</legend> 이름: <input type="text"><br> 전화번호: <input type="text"><br> 주소: <input type="text"> </fieldset> </form>
예제 - /practice/0323/form-fieldset.html <!DOCTYPE html> <html> <body> <form> <fieldset> <legend>인적사항입력</legend> 이름: <input type="text"><br> 전화번호: <input type="text"><br> 주소: <input type="text"> </fieldset> <p></p> <legend>선택사항</legend> 집전화번호: <input type="text"><br> 취미: <input type="text"><br> </form> </body> </html>
결과
추가 type Value Description color Defines a color picker date Defines a date control (year, month and day (no time)) datetime-local Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second (no time zone) email Defines a field for an e-mail address file Defines a file-select field and a "Browse..." button (for file uploads) hidden Defines a hidden input field image Defines an image as the submit button
추가 type (계속) month Defines a month and year control (no time zone) number Defines a field for entering a number range Defines a control for entering a number whose exact value is not important (like a slider control). Default range is from 0 to 100 search Defines a text field for entering a search string tel Defines a field for entering a telephone number time Defines a control for entering a time (no time zone) url Defines a field for entering a URL week Defines a week and year control (no time zone)
예제-practice/0323/form-input-type2.html <body> <form method=get action=form-input-type2.php> <br>date: <input type="date" name="birthdate"> <br>datetime-local: <input type="datetime-local" name="today"> <br>hidden: <input type="hidden" name="hidden_var"> <br>month: <input type="month" name="thismonth"> <br>time: <input type="time" name="now"> <br>week: <input type="week" name="whichweek"> <br>color: <input type="color" name="whatcolor"> <br>email: <input type="email" name="myemail"> <br>tel: <input type="tel" name="phonenumber"> <br>search: <input type="search" name="keyword"> <br>range: <input type="range" name="range"> <br>number: <input type="number" name="whatnumber"> <br>url: <input type="url" name="homepage"> <br><input type="submit"> </form> </body>
실행 결과
값 입력
이메일 입력 이메일: <input type="email" name="email" required><br> ... 이메일: <input type="email" name="email" required><br>
숫자 입력 ... 신발사이즈 <input type="number" min="230" max="290" step="10" value="260" name="shoesize"> 오페라 구글
range 입력 <input type="range" min="1" max="10" value="1"> ... 테니스 스킬 <input type="range" min="1" max="10" value="1">
날짜 입력 date – 날짜 입력 month – 월 입력 week – 주 입력 time – 시간 입력 datetime-local - 날짜와 시간을 입력할 수 있는 양식 제공, ... 생일 <input type="date" name=“dob”>
색상 입력 ... 색상선택: <input type="color" name="color"/> 오페라 구글
<form> 문 정리 <form method=get action=“action.php”> <input type=text name=…> <input type=hidden name=… value=…> <select name=… > <option value=…>설명</option> </select> <input type=submit value=“OK”> </form> submit 버튼이 있어야 데이터를 스크립트 파일로 전송
button 만들기-image버튼은 submit <form method=get action=action.php> <input type=button value=button1> <input type=submit value="제출"> <input type=reset value="초기화"> <input type=image src=images/button.jpg> <button type=button>button2</button> <button type=submit>또 제출</button> <button type=reset>또 초기화</button> <button type=submit> <img src=images/button.jpg></button> <p> <button type="button" onclick="alert('Hello World!')"> Click Me!</button> </form>
참고 – checked, selected <input type=radio … checked> <input type=checkbox …. checked> <select> <option value=val1 selected>설명1</option> </select>
HOMEWORK #3 교재 pp102-104: 문제5부터 10번까지 각 문제 번호로 다음과 같이 저장 문제5 -> ex5.html … 문제10->ex10.html cslab2의 /homework/hw3/ 디렉토리로 전송 TLS에 탑재