1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> #container { width: 520px; border: 1px solid black; padding: 20px 40px; margin: 0 auto } p { font-size: 25px; color: black; } form fieldset { margin-bottom: 25px; } form legend { font-size: 15px; font-weight: 600; } form ul li { list-style: none; margin: 15px 0; font-size: 14px; } .reg { font-size: 10px; color: #FF0000; font-weight: bold; float: left; text-align: right; margin-right: 10px; } </style> </head> <body> <fieldset> <form id="container"> <!-- form을 위에서 선언한 컨테이너 스타일로 만든다. --> <h1>201403010 김지하</h1> <p>상품 구매 양식</p> <!-- 재목에 입력할 폰트의 스타일을 잡아준다. --> <label class="reg" for="id">모든 항목을 모두 채워주세요.</label><br> <hr> 이름<br> <br> <input type="text"><br> <br> <!-- input설정 타입은 text --> 전화번호<br> <br> <input type="text" placeholder="-제외하고 입력"><br> <br> 연락 가능한 이메일<br> <br> <input type="email"><br> <br> <!-- input설정 타입은 email로 입력한 형식이 email형식이 아닐경우 오류표시 --> 사이즈<br> <br> <input type="radio" name="size" value="S"> S <input type="radio" name="size" value="M"> M <input type="radio" name="size" value="L"> L <input type="radio" name="size" value="XL"> XL<br> <br> <!-- 라디오 버튼 출력 --> 수량<br> <br> <select name="quantity"> <option>선택하세요</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br> <br> <!-- 리스트로 내려서 항목 표시 --> <input type="submit" value="제출"> <!-- 입력한 내용을 서버로 보냄 --> <input type="reset" value="다시 쓰기"> <!-- 입력한 내용 초기화 --> </form> </fieldset> </body> </html> | cs |
Style적용
- 보통 <head>테그 안에서 작성
- <style></style>테그 안에 설정 사항을 입력
Radio 버튼
- input타입이 radio타입
- 항목 중 한 가지 value값을 가져야 하므로 id와 name는 항목끼리 동일하게 설정
- 만약 id와 name이 항목별로 다르면 각각 다른 radio버튼으로 인식
- if - else문과 비슷한 작용 (if-else로 끝나는 구간은 하나의 조건으로 판별하는 방식)
Select 리스트
- <select name="quantity></select>로 선언
- select테그 안에 항목을 생성하려면 <option value=""></option>으로 선언
Submit & Reset
- input테그의 타입을 submit 혹은 reset로 선언
- submit : 서버로 해당 페이지의 정보를 전송
- reset : 현재 페이지의 모든 입력 내용을 초기화
'3학년 > 웹 프로그래밍(JSP)' 카테고리의 다른 글
| 웹 시스템 설계 및 개발 Github (0) | 2018.06.28 |
|---|---|
| Lab3 : javascript사용 (0) | 2018.05.14 |
| Lab1_1 : 개인 정보 출력 (0) | 2018.04.13 |