1 / 19

클릭하세요 HTML+ 웹디자인

클릭하세요 HTML+ 웹디자인. 11 장 입력양식 작성하기. 목 차. 입력 양식 폼 데이터를 입력 받는 양식 작성하기 3. 여러 가지 목록 중에서 선택하는 양식 작성하기 4. 명령을 지시하는 버튼 양식 작성하기 5. 기타 입력양식 작성하기. 1. 입력 양식 폼. 웹 사이트에 접속하여 원하는 작업을 하기 위해서 ( 예를 들어 메일을 보내거나 하는 등 ) 는 아이디와 패스워드를 입력해야 합니다. 게시판에 글을 올리기 위해서도 사용자의 정보나 생각을 홈페이지에 기록할 수 있어야 합니다 .

calvin
Download Presentation

클릭하세요 HTML+ 웹디자인

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 클릭하세요 HTML+웹디자인 11장 입력양식 작성하기

  2. 목 차 • 입력 양식 폼 • 데이터를 입력 받는 양식 작성하기 • 3. 여러 가지 목록 중에서 선택하는 양식 작성하기 • 4. 명령을 지시하는 버튼 양식 작성하기 • 5. 기타 입력양식 작성하기

  3. 1. 입력 양식 폼 웹 사이트에 접속하여 원하는 작업을 하기 위해서(예를 들어 메일을 보내거나 하는 등)는 아이디와 패스워드를 입력해야 합니다. 게시판에 글을 올리기 위해서도 사용자의 정보나 생각을 홈페이지에 기록할 수 있어야 합니다. 홈페이지가 일방적으로 제공하는 정보를 얻는 것뿐만 아니라 사용자가 입력한 데이터를 받기 위해서 쌍방향 통신을 하기 위해서 필요한 것이 폼입니다.

  4. 1.1 간단한 폼 양식 작성하기(<form> ~ </form>) [예제 :ht11-1.html] <html> <head><title>폼 양식 작성하기</title></head> <body> 개인 정보 등록하기<hr> <form> 이 름 : <input type ="text" name="irum"><br> 메 일 : <input type ="text" name="email"><br><br> <input type = "radio" name="sex" checked>남성 <input type = "radio" name="sex" >여성<br><br> <input type = "submit" value="송신" > &nsp; <input type = "reset" value="재입력" > </form> </body> </html>

  5. 2. 데이터를 입력받는 양식 작성하기 2.1. 텍스트 입력 양식(<input type="text">) [예제 :ht11-2.html] <html> <head><title>폼 양식 작성하기</title></head> <body> 개인 정보 등록하기<hr> <form> 이 름 : <input type ="text" name="irum" ><br> 메 일 : <input type ="text" name="email" value = "duk@hotmail.com"><br> 전 화 : <input type ="text" name="tel" MAXLENGTH=10><br> 주 소 : <input type ="text" name="addr" SIZE=30><br> </form> </body> </html>

  6. 2.2 암호 입력 양식(<input type="password">) [예제 :ht11-3.html] <html> <head><title>폼 양식 작성하기</title></head> <body> Messenger Service <hr> <form> <table> <tr> <td> 로그인 아이디 : </td> <td> <input type ="text" name="email" value = "duk@hotmail.com"> </td> </tr> <tr> <td> 암호 : </td> <td> <input type ="password" > </td> </tr> </form> </body> </html>

  7. 3. 여러 가지 목록 중에서 선택하는 양식 작성하기 3.1 체크 박스 양식(<input type="checkbox">) [예제 :ht11-4.html] <html> <head><title>폼 양식 작성하기</title></head> <body> 좋아하는 영화를 선택하세요. <hr> <form> <input type ="checkbox" name="check" checked="on" >블루<br> <input type ="checkbox" name="check" >레드<br> <input type ="checkbox" name="check" checked="on" >화이트<br> </form> </body> </html>

  8. 3. 2 라디오 버튼 양식(<input type="checkbox">) [예제 :ht11-5.html] <html> <head><title>폼 양식 작성하기</title></head> <body> 좋아하는 영화를 선택하세요. <hr> <form> <input type ="radio" name="movie" checked="on" >블루<br> <input type ="radio" name="movie" >레드<br> <input type ="radio" name="movie">화이트<br> </form> </body> </html>

  9. 4. 명령을 지시하는 버튼 양식 작성하기 4.1 버튼 양식(<input type="button">) [예제 : ht11-6.html] <html> <head><title>폼 양식 작성하기</title></head> <body> <form> <input type ="button" value ="배"> <input type ="button" value="앵두"> </form> </body> </html>

  10. 4.2 서브미트 버튼 양식(<input type="submit">) [예제 :ht11-8.html] <html> <head> <title>폼 양식 작성하기</title> </head> <body> <form> <center> 이 름 : <input type ="text" SIZE=30 ><br> 메 일 : <input type ="text" SIZE=30><br> 전 화 : <input type ="text" SIZE=30><br> 주 소 : <input type ="text" SIZE=30><br> <br><br> <input type="submit" value=" 전 송 버 튼 "> </center> </form> </body> </html>

  11. 4.3 리셋 버튼 양식(<input type="reset">) [예제 :ht11-9.html] <html> <head> <title>폼 양식 작성하기</title> </head> <body> <form> <center> 이 름 : <input type ="text" SIZE=30 ><br> 메 일 : <input type ="text" SIZE=30><br> 전 화 : <input type ="text" SIZE=30><br> 주 소 : <input type ="text" SIZE=30><br> <br><br> <input type="submit" value=" 전 송 버 튼 "> <input type="reset" value=" 재입력 버튼 "> </center> </form> </body> </html>

  12. 5. 기타 입력양식 작성하기 5. 1. 텍스트 영역(<textarea>～</textarea>) [예제 :ht11-10.html] <html> <head> <title>폼 양식 작성하기</title> </head> <body> <center> <h3>간단하게 자기소개를 하세요</h3><br> <form> <textarea rows=12 cols=70> 저는 예쁜 공주입니다. </textarea> <br><br> <input type="submit" value=" 전 송 버 튼 "> <input type="reset" value=" 재입력 버튼 "> </center> </form> </body> </html>

  13. 5.2. 콤보 박스 작성하기(<select>～</select>) [예제 :ht11-11.html] <html> <head><title>폼 양식 작성하기</title></head> <body> <center> <h3> 좋아하는 노래를 선택하세요</h3><br> <form> <select> <option> 천녀의 사랑 <option> 말해줘 <option> 텅 빈 마음 <option> 블루 레인 </center> </form> </body> </html>

  14. 5.3 리스트 박스 작성하기(<select>～</select>) [예제 :ht11-12.html] <html> <head> <title>폼 양식 작성하기</title> </head> <body> <center> <h3> 좋아하는 게임을 선택하세요</h3><br> <form> <select size=4> <option> 스타그래프트 <option> 디아블로 <option> 파파2002 <option> 커맨드앤드컨쿼 </center> </form> </body> </html>

  15. 6. 회원 가입 문서 만들기 [예제 :ht11-14-01.html] <html> <head><title> 홈페이지에 오신걸 환영합니다.</title></head> <body bgcolor="#FB9C06"> <center> 회원가입하기<br> </center> <table border=0 cellspacing=0 cellpadding=0 width=600 align="center"> <form> <tr bgcolor="#EFEFEF"> <td align="right">이름</td> <td>&nbsp;&nbsp; <input type=text size=20 value=""> </td> </tr> </form> </table> </body> </html>

  16. 주민등록번호, 전화번호, 휴대폰, 주소를 입력받기 [예제 :ht5-14-02.html] <tr bgcolor="#EFEFEF"> <td align="right">주민등록번호</td> <td>&nbsp;&nbsp; <input type=text size=6 value=""> - <input type=text size=7 value=""> <input type="button" value="중복검사" > </td> </tr> <tr bgcolor="#EFEFEF"> <td align="right">전화번호</td> <td>&nbsp;&nbsp; <input type=text size=4 value=""> - <input type=text size=4 value=""> - <input type=text size=4 value=""> </td> </tr> <tr bgcolor="#EFEFEF"> <td align="right">휴대폰</td> <td>&nbsp;&nbsp; <input type=text size=4 value=""> - <input type=text size=4 value=""> - <input type=text size=4 value=""> </td> </tr> <tr bgcolor="#EFEFEF"> <td align="right">주소</td> <td>&nbsp;&nbsp; <input size=45 value="" > <Input size=38 type=hidden value=""> <input type="button" value="주소찾기"> </td> </tr>

  17. 아이디와 패스워드를 입력 받기 [예제 :ht11-14-03.html] <tr bgcolor="#E4E4E4"> <td align="right">아이디</td> <td>&nbsp;&nbsp;<input type=text size=12 value=""> &nbsp;&nbsp;<input type="button" value="중복검사"></td> </tr> <tr bgcolor="#EFEFEF"> <td align="right">비밀번호</td> <td>&nbsp;&nbsp;<input type=password size=12 value=""> &nbsp;&nbsp;&nbsp;&nbsp; 비밀번호확인&nbsp;&nbsp;&nbsp; <input type=password size=12 value=""> </td> </tr>

  18. 생년월일을 입력 받기 [예제 :ht11-14-04.html] <tr bgcolor="#E4E4E4"> <td align="right">생년월일</td> <td>&nbsp;&nbsp; <input type=text size=4 value="">년 <SELECT NAME="BirthDateMonth"> <OPTION VALUE=""> </OPTION> <option VALUE="1">1</OPTION> <option VALUE="2">2</OPTION> <option VALUE="3">3</OPTION> <option VALUE="4">4</OPTION> <option VALUE="5">5</OPTION> <option VALUE="6">6</OPTION> <option VALUE="7">7</OPTION> <option VALUE="8">8</OPTION> <option VALUE="9">9</OPTION> <option VALUE="10">10</OPTION> <option VALUE="11">11</OPTION> <option VALUE="12">12</OPTION> </SELECT>월 <SELECT NAME="BirthDateDay"> <OPTION VALUE=""> </OPTION> <option VALUE="1">1</OPTION> <option VALUE="2">2</OPTION> <option VALUE="3">3</OPTION> <option VALUE="4">4</OPTION> <option VALUE="5">5</OPTION> <option VALUE="6">6</OPTION> <option VALUE="7">7</OPTION> <option VALUE="8">8</OPTION> <option VALUE="9">9</OPTION> <option VALUE="10">10</OPTION> <option VALUE="11">11</OPTION> <option VALUE="12">12</OPTION> <option VALUE="13">13</OPTION> <option VALUE="14">14</OPTION> <option VALUE="15">15</OPTION> <option VALUE="16">16</OPTION> <option VALUE="17">17</OPTION> <option VALUE="18">18</OPTION> <option VALUE="19">19</OPTION> <option VALUE="20">20</OPTION> <option VALUE="21">21</OPTION> <option VALUE="22">22</OPTION> <option VALUE="23">23</OPTION> <option VALUE="24">24</OPTION> <option VALUE="25">25</OPTION> <option VALUE="26">26</OPTION> <option VALUE="27">27</OPTION> <option VALUE="28">28</OPTION> <option VALUE="29">29</OPTION> <option VALUE="30">30</OPTION> <option VALUE="31">31</OPTION> </SELECT>일 <input type=radio Name=SolarLunarStatus value=0 checked>양력 <input type=radio Name=SolarLunarStatus value=1 >음력 </td> </tr>

  19. 이 메일 주소, 홈페이지 주소, 개인 프로필을 입력 받기 [예제 :ht11-14-05.html] <tr bgcolor="#EFEFEF"> <td align="right">E-mail 주소</td> <td>&nbsp;&nbsp; <input type="text" size="25" Value=""> &nbsp;&nbsp;</td> </tr> <tr bgcolor="#DCDCDC"> <td align="right">홈페이지 주소</td> <td>&nbsp;&nbsp; <input type="text" size="30“ maxlength="70“ Value="http://"> </td> </tr> <tr bgcolor="#EFEFEF"> <td align="right"><br>개인 프로필</td> <td>&nbsp;<textarea rows="4" cols="40" ></textarea></td> </tr> <tr bgcolor="#DCDCDC"> <td colspan="2" bgcolor="#DEDBCE" align="center" valign=middle height=40> <input type="button" value="가입하기">&nbsp;&nbsp; <input type="button" value="가입취소""></td> </tr>

More Related