CAFE

김영민

20240926 form과제

작성자김영민1|작성시간24.09.26|조회수28 목록 댓글 1
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>login.html</title>
  <style>
    input {
      margin: 5px;
    }
    div {
      margin: 5px;
    }
  </style>
</head>
<body>
  <form>
    <fieldset align="center">
      <legend><font size="5" color="blue">로그인</font></legend>
      아이디<input type="text" autofocus>
      비밀번호<input type="password">
      <input type="submit" value="로그인">
    </fieldset>
    <fieldset  align="center">
      <legend><font size="5" color="blue">가입하기</font></legend>
      아이디 <input type="text" required placeholder="여백없이 입력하시오"><br />
      비밀번호 <input type="password" required placeholder="여백없이 입력하시오"><br />
      이름 <input type="text" required placeholder="여백없이 입력하시오"><br />
      메일주소 <input type="email" required placeholder="여백없이 입력하시오"><br />
      전화번호 <input type="tel" placeholder="여백없이 입력하시오"><br />
    </fieldset>
    <fieldset align="center">
      <label><input type="submit" value="가입하기"></label>
      <label><input type="reset" value="다시쓰기"></label>
    </fieldset>
    <hr />
    <h1 align="left">등록정보</h1>
    <div>
      참여인원(최대10명) <input type="number" max="10" min="0" /> 
    </div>
    <div>
      지원물품(1인당 5개) <input type="number" max="25" min="0" /> 
    </div>
    <div>
      희망단계(하,중,상) <input type="range" max="2"/>
    </div>
    <fieldset>
      <legend>수강과목을 선택하세요 (1과목 선택 가능)</legend>
      신청 과목(회화)
      <label for="e1"><input type="radio" id="e1" name="eng1" checked>영어 회화(초급)</label>
      <label for="e2"><input type="radio"  id="e2" name="eng1">영어 회화(중급)</label>
      <label for="e3"><input type="radio"  id="e3" name="eng1">영어 회화(고급)</label>
      <br />
      신청 과목(자격)
      <label for="e11"><input type="radio" id="e11" name="eng2" checked>TOEIC</label>
      <label for="e12"><input type="radio"  id="e12" name="eng2">TOEFL</label>
      <label for="e13"><input type="radio"  id="e13" name="eng2">OPIC</label>
    </fieldset>
  </form>
</body>
</html>
cs
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
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vacation.html</title>
  <style>
    div {
      margin: 5px;
    }
  </style>
</head>
<body>
  <form>
    <h1>여름방학 특강 신청</h1>
    <fieldset align="center">
      <legend><font size ="4"><strong>수강 신청인</strong></font></legend>
      <div>학번 <input type="number" /></div>
      <div>이름 <input type="text" ></div>
      <div>
      학과 <select name="major" id="major">
        <option selected>컴퓨터 공학과</option>
        <option>국문학과</option>
        <option>물리학과</option>
        <option>기타</option>
      </select>
    </div>
    </fieldset>
    <fieldset align="center">
      <legend ><font size ="4"><strong>수강 과목을 선택하세요</strong></font></legend>
      <div>선호색상  <input type="color" /></div>
      <div>
        신청 과목(회화)
        <label for="e1"><input type="radio" id="e1" name="eng1" checked>영어 회화(초급)</label>
        <label for="e2"><input type="radio"  id="e2" name="eng1">영어 회화(중급)</label>
        <label for="e3"><input type="radio"  id="e3" name="eng1">영어 회화(고급)</label>
      </div>
      <div>
        신청 과목(자격)
        <label for="e11"><input type="radio" id="e11" name="eng2" checked>TOEIC</label>
        <label for="e12"><input type="radio"  id="e12" name="eng2">TOEFL</label>
        <label for="e13"><input type="radio"  id="e13" name="eng2">OPIC</label>
      </div>
      <div>
        관심분야
        <label for="gram"><input type="checkbox" name="subject" id="gram">문법</label>
        <label for="voca"><input type="checkbox" name="subject" id="voca">Vocabulary</label>
        <label for="con"><input type="checkbox" name="subject" id="con">회화</label>
        <label for="lis"><input type="checkbox" name="subject" id="lis">리스닝</label>
        <label for="news"><input type="checkbox" name="subject" id="news">뉴스 청취</label>
        <label for="read"><input type="checkbox" name="subject" id="read">독해</label>
      </div>
    </fieldset>
    <fieldset align="center">
      <legend><font size ="4"><strong>강의 시간을 선택하세요</strong></font></legend>
      <div>개강 주 <input type="datetime-local"></div>
      <div>강의 시간 <input type="time"></div>
    </fieldset>
    <hr />
    <h1>특강 신청</h1>
    <fieldset align="center">
      <legend><font size ="4"><strong>수강과목</strong></font></legend>
      <font color = "green"><strong>영어회화(초급)</strong></font>
      <input type="datetime">
    </fieldset>
    <fieldset align="center">
      <legend><font size ="4"><strong>신청자</strong></font></legend>
      <div><font color = "green"><strong>이름</strong></font><input type="datetime"></div>
      <div><font color = "green"><strong>학번</strong></font><input type="number" placeholder="하이픈 없이 입력"></div>
      <div>
        <font color = "green"><strong>학과</strong></font>
        <select name="major" id="major">
          <option selected>컴퓨터 공학과</option>
          <option>국문학과</option>
          <option>물리학과</option>
          <option>기타</option>
        </select>
        </div>
      <div><font color = "green"><strong>연락처</strong></font><input type="tel"></div>
      
    </fieldset>
    <fieldset align="center">
      <legend><font size ="4"><strong>교재 주문</strong></font></legend>
        <div><font color = "green"><strong>교재</strong></font><input type="number" /></div>
        <div><font color = "green"><strong>워크시트</strong></font><input type="number" /></div>
        <div><font color = "green"><strong>단체주문</strong></font><input type="number" /></div>
    </fieldset>
    <fieldset align="center">
      <input type="submit" value="신청하기">
      <input type="reset" value="다시쓰기">
    </fieldset>
  </form>
</body>
</html>
cs
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>buy.html</title>
  <style>
    div {
      margin: 10px;
    }
    #memo {
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <h1>상품 주문서</h1>
  <form>
    <fieldset align="center">
      <legend align="left"><font size="4" color="purple">개인정보</font></legend>
      <div>이름 <input type="text" placeholder="여백없이 입력"></div>
      <div>연락처 <input type="tel" placeholder="연락가능한 번호"></div>
    </fieldset>
    <fieldset align="center">
      <legend align="left"><font size="4" color="purple">배송지 정보</font></legend>
      <div>주소 <input type="text"></div>
      <div>전화번호 <input type="tel"></div>
      <div>메모 <textarea rows="4" cols="50"></textarea></div>
    </fieldset>
    <fieldset align="center">
      <legend align="left"><font size="4" color="purple">주문 정보</font></legend>
      <div><input type="checkbox" id="gua"><label for="gua"> 과테말라 안티구아 (100g) </label><input type="number" min="1" />개</div>
      <div><input type="checkbox" id="indo"><label for="indo"> 인도네시아 만델링 (100g) </label><input type="number" min="1" />개</div>
      <div><input type="checkbox" id="tam"><label for="tam"> 탐나는도다(블렌딩) (100g) </label><input type="number" min="1" />개</div>
    </fieldset>
  </form>
</body>
</html>
cs
다음검색
현재 게시글 추가 기능 열기

댓글

댓글 리스트
  • 작성자행복 | 작성시간 24.09.27 폼태그에 적용하는 css연습 좋습니다.
    화면에 배치되는 필드 타이틀들과 입력상자의 배치도 같은 열에 배치되면 더 보기 좋을듯 합니다. 수고하셨어요
댓글 전체보기
맨위로

카페 검색

카페 검색어 입력폼