반응형
<input type=" "> |
|
| <input type="text"> | |
| <input type="password"> 입력시 마스킹처리됨 | *** |
| <input type="email"> 앞글자 @ 뒤글자 존재해야만 함 | email@email.com |
| <input type="url"> http://글자 하나라도 존재 https://글자 하나라도 존재 |
|
| <input type="tel"> | |
| <input type="radio" name="fruits" value="apple"> <input type="radio" name="fruits" value="pear"> - 단일 선택이 가능한 입력요소 - name같게하여 radio버튼에서 그룹으로 묶여주는 기능 역할 - 그룹을 지정하고자 할 경우에는 반드시 동일한 이름의 name속성을 지정해주어야 한다. - 반드시 value속성이 존재해야 한다. - value미기재시 체크한 값은 모두 on으로 값을 전송하므로 어떤 값을 선택했는지에 대한 구분을 할 수x - 사용자가 선택할 때 어떠한 값인지를 구분하기 위한 라벨이나 텍스트가 존재해야 한다. - checked : select의 역할, 기본값을 지정한다 - default : 빈값 |
 |
| <input type="checkbox" name="g" value="apple"> - 다중선택이 가능한 입력요소 - 반드시 value속성이 존재해야 한다. - value속성을 기재하지 않을 경우 체크한 값은 모두 on으로 값을 전송하므로 어떤 값을 선택했는지에 대한 구분을 할 수x - 사용자가 선택할 때 어떠한 값인지를 구분하기 위한 라벨이나 텍스트가 존재해야 한다. - name이 같거나 달라도 상관없음. - 입력요소는 빈값으로 전송시 ""빈문자열이 전송되지만 checkbox는 전송되는 값 자체가 없다. - checked : select의 역할, 기본값을 지정한다 - default : 빈값 |
 |
| <input type="date" min="1950-01-01" max="2002-08-08"> - 미선택 후 전송시 빈문자열 전송됨 - default : 빈문자열 |
 |
| <input type="time" min="09:00"> - default : 오전 - min/max 값 외 선택시 재입력문구 뜸 |
 |
| <input type="datetime-local"> |  |
| <input type="number" step="단위값" > - 정수값만 입력가능 |
 |
| <input type="reset"> - 초기값(value)으로 되돌림 |
|
| <input type="search"> - 검색창 생성 |
 |
| <input type="hidden"> -브라우저상에서 안 보임 -서버로 값이 전송됨 |
|
| <input type="color" value="#00ff00"> - default : 000000, black |
|
<input type="radio">
<input type="checkbox">
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>웹 폼</title>
</head>
<body>
<form>
<fieldset>
<legend>신청 과목</legend>
<p>이 달에 신청할 과목을 선택하세요(1과목만 가능)</p>
<input type="radio" id="sub1" name="subject" value="speaking"><label for="sub1"></label>회화</label>
<label><input type="radio" name="subject" value="grammar">문법</label>
<label><input type="radio" name="subject" value="writing">작문</label>
</fieldset>
<fieldset>
<legend>메일링</legend>
<p>메일로 받고 싶은 뉴스 주제를 선택해주세요(복수 선택 가능)</p>
<label><input type="checkbox" name="mailing" value="news">해외단신</label>
<label><input type="checkbox" name="mailing" value="dialog">5분 회화</label>
<label><input type="checkbox" name="mailing" value="pops">모닝팝스</label>
</fieldset>
<input type="submit" value="전송">
</form>
</body>
</html>
<input type="color">
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>웹 폼</title>
</head>
<body>
<form>
<fieldset>
<legend>과 티셔츠 설문</legend>
<p>올해 과 티(T)를 만들려고 합니다. 원하는 색상을 추천해주세요.</p>
<label>
<input type="color" name="color1"> /*컬러미지정- 기본값 000000 black*/
<input type="color" name="color" value="#00ff00"></label>
<input type="submit" >
</fieldset>
</form>
</body>
</html>
<input type="date">
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>date</title>
</head>
<body>
<form>
<h3>조회기간 선택</h3>
<!-- date는 yyyy-mm-dd형식으로 년,월,일이 표시됨 -->
<label><input type="date" id="start" name="start" min="1950-01-01" max="2002-08-08"></label>
<label><input type="date" id="end" name="end"></label>
<input type="submit" value="전송">
</form>
</body>
</html>
<input type="time">
<input type="datetime-local">
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>time</title>
</head>
<body>
<form>
<h3>대관시간을 선택하세요(오늘)</h3>
<!-- time은 오전/오후 시간으로 나뉘어 설정 가능. 값은 24시간제로 표시됨. -->
<label>시작시간
<input type="time" name="start1" value="09:00">
</label>,
<label>종료시간
<input type="time" name="end1" value="18:00">
</label>
<!-- dateime yyyy-mm-dd형식 다음에 시간을 의미하는 T(TimeZone)값이 자동으로 붙음.
뒤에 24시간제로 시간 표시됨 -->
<h3>대관시간을 선택하세요(다른 날짜)</h3>
<label>시작시간
<input type="datetime-local" min="2000-01-01T00:00" max="2050-12-31T23:59">
</label>,
<br>
<label>종료시간
<input type="datetime-local" value="2016-03-02 15:00" name="end2">
</label>
<br>
<input type="submit" value="전송">
</form>
</body>
</html>
input 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>웹폼</title>
<style>
/* body{text-align:right;} */
legend{font-size:16px; font-weight:900;}
label{font-size:14px; width:200px; color:#390; font-weight: bold; margin-right:10px;}
li{list-style: none; margin: 15px 0; font-size:14px;}
</style>
</head>
<body>
<h1>여름방학 특강 신청</h1>
<form>
<fieldset>
<legend>수강과목</legend>
<ul>
<li>
<label for="sub1">영어회화(초급)</label>
<input type="text" id="subj" name="subj" value="오전 9:00~11:00" readonly>
</li>
</ul>
</fieldset>
<fieldset>
<legend>신청자</legend>
<ul>
<li>
<label for="uname">이름</label>
<input type="text" id="uname" name="uname" autofocus required>
</li>
<li>
<label for="uid">학번</label>
<input type="text" id="uid" name="uid" placeholder="하이픈없이 입력" minlength="2" maxlength="8" required>
</li>
<li>
<label for="uclass">학과</label>
<select id="uclass" name="uclass">
<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>
</ul>
</fieldset>
<fieldset>
<legend>교재 주문</legend>
<ul>
<li><label for="book">교재</label><input type="number" id="book" value="1" min="1" max="3"></li>
<li><label for="wsheet">워크시트</label><input type="number" id="wsheet" value="1" min="1" max="3"></li>
<li><label for="group">단체주문</label><input type="number" id="group" value="10" min="10" max="100" step="10"></li>
</ul>
</fieldset>
<fieldset>
<legend>버튼 선택</legend>
<button type="submit" value="submit">신청하기</button>
<button type="reset" value="reset">다시쓰기</button>
</fieldset>
</form>
</body>
</html>
NAVER 회원가입 input type분석
 |
반응형