본문 바로가기
Programming/국비학원

220608 - html (form)

지고르 2022. 6. 9. 13:29
  • 폼1

<body>
<form action="search.jsp" method="get"> //method : 전송 방식 (get - 주소에 값 표시해 서버 전달, 검색에 쓰임)
<input type="search" name="search">
<input type="submit" value="검색">
</form>
<form action="member.jsp" method="post" autocomplete="off"> //★post-주소에 값 보여지지 않음) //autocomplete : 자동완성
<fieldset> //영역 묶음
<legend>회원가입</legend> //영역 제목
<p>
<label for="na">이름</label> //for : label 눌렀을 때 id에 커서 생김
<input type="text" name="na" id="na" maxlength="10" placeholder="이름 입력">
//name : 백엔드 연관 //id : 2가지 용도(유일한 태그 이름 지정&label for과 연결해 포커스 기능 추가) //placeholder : 힌트
</p>
<p>
<label for="id">아이디</label>
<input type="text" name="id" id="id" maxlength="15">
</p>
<p>
<label for="pass">비밀번호</label>
<input type="password" name="pass" id="pass">
</p>
</fieldset>
<input type="submit" value="회원 등록"> //submit : name 변수에 login.jsp 담아서 서버로 전송
<input type="reset" value="다시 입력"> //모든 태그 내용 삭제
</form>
</body>


  • 폼2

<body>
<form>
<p>
<label for="">이름</label>
<input type="text" value="홍길동" readonly> //readonly : 읽기 전용 => 수정 불가, 커서 X
<input type="hidden" name="code" value="123"> //hidden : 서버 전송O 사용자 화면 표시X => 중복확인
</p>

<h3>좋아하는 스포츠 종목 (다수 선택 가능)</h3>
<p> //블록타입 (새로운 한 줄 차지)
<input type="checkbox" name="sports1" value="football">축구 //체크 시 value값이 name 변수에 담김 => football 서버 전달
<input type="checkbox" name="sports2" value="baseball">야구
<input type="checkbox" name="sports3" value="volleyball">배구
</p>

<h3>여름방학 특강 수강과목을 선택하세요 (1과목만)</h3>
<input type="radio" name="subject" value="eng" checked>영어회화 //checked : 첫 화면에 체크표시 / 속성=값이면 값생략
<input type="radio" name="subject" value="ch">중국어회화
<input type="radio" name="subject" value="jp">일본어회화

<p>
<label for="">주소</label>
<input type="text" name="address" size="30">
</p>
</form>
</body>

  • 글자 눌렀을 때에도 체크표시

1.
<input type="radio" name="subject" id="eng" value="eng" checked>
<label for="eng">영어회화</label>

2. 단일 선택
<label><input type="radio" name="subject" value="eng" checked>영어회화</label>
<label><input type="radio" name="subject" value="ch">중국어회화</label>
<label><input type="radio" name="subject" value="jp">일본어회화</label>


  • 폼3

<body>
<form>
<p>
<label>URL</label>
<input type="url"> // http://~ 필수
</p>
<p>
<label>이메일</label>
<input type="email">
</p>
<p>
<label>휴대폰</label>
<input type="tel" pattern="\d{3}-\d{3,4}-\d{4}"> //모바일 - 숫자키보드만 올라옴 //정규화식
</p>
<input type="submit" value="전송">
</form>

<form>
<p>
<label>수량 (최대 5개)</label>
<input type="number" value="0" min="0" max="20" step="2" > //스핀 박스 => 숫자만 입력됨 //step : x만큼 증감
</p>
<p>
<label>주문 갯수</label>
<input type="range" value="1" min="1" max="10"> //막대 모양
</p>
<p>
<label>색상</label>
<input type="color">
</p>
</form>

<form>
<fieldset>
<legend>과 티셔츠 설문</legend>
<p>올해 과티 제작 예정입니다. 원하는 색상 추천 바랍니다.</p>
<label>선호 색상 <input type="color" value="#0000ff"></label>
</fieldset>
</form>
</body>


  • 폼4

<body>
<form>
<h2>조회기간 선택</h2>
<p>
<input type="date" id="start"> //month,week도 가능
<input type="date" id="end">
</p>
<h2>원서 접수</h2>
<p>
<label>날짜 선택 <input type="date" min="2022-06-08" max="2022-07-10"></label> //날짜 //기본값 : 오늘
</p>
<h2>대관 시간 선택 (오늘)</h2>
<label>시작 시간 <input type="time" value="09:00"></label> //시간
<label>종료 시간 <input type="time" value="18:00"></label>
<h2>대관 시간 선택 (날짜 선택 가능)</h2>
<label>시작 시간 <input type="datetime-local" value="2022-06-08T09:00"></label> //날짜, 시간 (로컬시간대)
<label>종료 시간 <input type="datetime-local" value="2022-06-08T18:00"></label> //cf. datetime : 빈 입력창(국제표준시)
</form>
</body>


  • 폼5

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼 관련 태그</title>
<script>
function popup(){
window.open("popup.html","pop","width=500, height=300");
}
</script>
</head>
<body>
<form action="login.jsp" method="post" autocomplete="off">
<fieldset>
<legend>로그인</legend>
<p>
<label for="id">아이디</label>
<input type="text" name="id" id="id" maxlength="10" required autofocus>
//required : 필수입력란 //autofocus : 기본 커서 (한 곳에만 작성하기)
</p>
<p>
<label for="pass">비밀번호</label>
<input type="password" name="pass" id="pass" required>
</p>
</fieldset>
<!-- <input type="submit" value="로그인"> -->
<input type="image" src="../images/login.png" alt="login">
<input type="reset" value="다시 입력">
</form>
<input type="button" value="광고 보기" onclick="popup();"> //javascript와 연결 목적으로만 사용
<p>
<label>첨부파일<input type="file"></label>
</p>
</body>

  • 광고 팝업

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>광고</title>
</head>
<body>
<h2>코로나 끝까지 조심!</h2>
<img src="../images/corona.jpg" width="300" alt="">
<input type="button" value="닫기" onclick="window.close()">
</body>

  • 여러 줄 입력, 선택 요소

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>여러줄 입력, 선택요소</title>
<!-- <style>
textarea {
resize: none;
}
</style>-->
</head>
<body>
<h2>소개글</h2>
<textarea cols="30" rows="5"></textarea>

<form>
<h2>여름방학 특강 신청</h2>
<fieldset>
<legend>수강 신청인</legend>
<p>
<label>학번</label>
<input type="text" name="classNum">
</p>
<p>
<label>성명</label>
<input type="text" name="na">
</p>
<p>
<label>학과</label>
<select name="class"> //입력X 선택O => 자바 스피너와 유사
<option value="archi">건축공학과</option>
<option value="mechanic">기계공학과</option>
<option value="indust">산업공학과</option>
<option value="elec">전자공학과</option>
<option value="computer">컴퓨터공학과</option>
<option value="chemical">화학공학과</option>
</select>
</p>
<p>
<label>학과</label>
<select name="class" size="4" multiple>
<option value="archi">건축공학과</option>
<option value="mechanic">기계공학과</option>
<option value="indust">산업공학과</option>
<option value="elec">전자공학과</option>
<option value="computer" selected>컴퓨터공학과</option>
<option value="chemical">화학공학과</option>
</select>
</p>
</fieldset>
</form>
</body>
















'Programming > 국비학원' 카테고리의 다른 글

220610 - css(선택자, Vendor Prefix, 텍스트 스타일)  (0) 2022.06.11
220609 - html(select, datalist, 멀티미디어, meta, 기타, 시멘틱 구조 태그), CSS(외부/내부/인라인 스타일)  (0) 2022.06.10
220607 - html  (0) 2022.06.08
220603 - html  (0) 2022.06.05
220531 - 안드로이드 구현 실습 (AlertDialog)  (0) 2022.06.01

'Programming/국비학원' Related Articles

티스토리툴바