반응형
Index 항목을 클릭하면 해당 위치로 이동합니다.
INDEX
1. <form>
2. <label>
3. <fieldset> , <legend>
4. <input>
5. <input> 태그의 type
6. <input> 태그의 속성
7. 드롭다운 목록 만들기
8. <button> 태그
9. <meter> 태그
4. <input>
웹에서의 폼은 크게 사용자가 입력하는 부분과 입력한 내용을 서버로 보내는 버튼 부분으로 나눌 수 있다.
사용자가 내용을 입력하는 부분을 만들 때 사용하는 태그가 바로 <input>태그이다.
<input>태그의 type속성에서 사용가능한 유형
해당 type속성을 누르면 이동
- <input type="text">
- <input type="password">
- <input type="search">
- <input type="url">
- <input type="email">
- <input type="tel">
- <input type="number">
- <input type="range">
- <input type="radio">
- <input type="checkbox">
- <input type="color">
- <input type="date">
- <input type="month">
- <input type="week">
- <input type="time">
- <input type="datetime">
- <input type="datetime-local">
- <input type="submit">
- <input type="reset">
- <input type="button">
- <input type="file">
type = "text" - 텍스트 필드 만들기
<input type="text" [속성 = "속성 값"]><label>아이디 <input name="user-id" size="10" type="text"></label>
| 속성 | 설명 |
| name | 텍스트 필드를 구별 |
| size | 텍스트 필드의 길이 ( 화면에 표시할 글자 수 지정 ) |
| value | 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 표시될 내용 |
| maxlength | 텍스트 필드에 입력할 수 있는 최대 문자 개수를 지정 |
type = "password" - 비밀번호 입력 필드 만들기
<input type="password" [속성 = "속성 값"]><form>
<fieldset>
<legend>로그인</legend>
<ul>
<li><label for="idin">아이디</label> <input id="idin" type="text" /></li>
</ul>
<ul>
<li><label for="pwin">비밀번호</label> <input id="pwin" type="password" /></li>
</ul>
</fieldset>
</form>
type = "search" - 검색 상자 만들기
<input type="search" [속성 = "속성 값"]><form>
<fieldset>
<legend>로그인</legend>
<ul>
<li><label for="idin">아이디</label> <input id="idin" type="text" /></li>
</ul>
<ul>
<li><label for="pwin">비밀번호</label> <input id="pwin" type="password" /></li>
</ul>
</fieldset>
<fieldset>
<legend>분화된 텍스트 필드</legend>
<ul>
<li><input type="search" /><input type="submit" value="검색" /></li>
</ul>
</fieldset>
</form>
type = "url" - URL 입력 필드 만들기
<input type="url" [속성 = "속성 값"]>
type = "email" - 이메일 주소 입력 필드 만들기
<input type="email" [속성 = "속성 값"]>
type = "tel" - 연락처 필드 만들기
<input type="tel" [속성 = "속성 값"]>
type = "number" - 숫자 입력 필드 만들기
<input type="number" [속성 = "속성 값"]>
type = "range" - 슬라이드 막대로 숫자 지정하기
<input type="range" [속성 = "속성 값"]>
type = "radio" - 라디오 버튼
<input type="radio" [속성 = "속성 값"]>
type = "checkbox" - 체크박스 만들기
<input type="checkbox" [속성 = "속성 값"]>
type = "color" - 색상 선택 상자 표시하기
<input type="color" [속성 = "속성 값"]>
type = "date" , type = "month" , type = "week" - 날짜표시하기
<input type="text" [속성 = "속성 값"]>
type = "time" - 시간 지정하기
<input type="time" [속성 = "속성 값"]>
type = "submit" , type = "reset" - 서버 전송 , 리셋 버튼 넣기
<input type="submit" [속성 = "속성 값"]>
type = "button" - 버튼 넣기
<input type="button" [속성 = "속성 값"]>
type = "file" - 파일 첨부
<input type="file" [속성 = "속성 값"]>
업로드 사용 코드
더보기
<form>
<fieldset>
<legend>로그인</legend>
<ul>
<li><label for="idin">아이디</label> <input id="idin" type="text" /></li>
</ul>
<p> </p>
<ul>
<li><label for="pwin">비밀번호</label> <input id="pwin" type="password" /></li>
</ul>
</fieldset>
<p> </p><p> </p>
<fieldset><legend>분화된 텍스트 필드</legend>
<ul>
<li><input type="search" /><input type="submit" value="검색" /></li><p> </p><p> </p>
<p>이 필드에는 반드시 http:// 로 시작하는 사이트 주소를 입력해야 합니다.</p><p> </p>
<li><label>URL 입력 필드 <input type="url" /></label></li><p> </p><p> </p>
<p>브라우저 자체에서 이메일 형식이 맞는지 자동으로 체크해준다.</p><p> </p>
<li><label>email 입력 필드 <input type="email" /></label></li><p> </p><p> </p>
<p>이 값을 이용하면 바로 전화를 걸 수 있도록 변환</p><p> </p>
<li><label>전화번호 <input type="tel" /></label></li>
</ul>
</fieldset>
<p> </p><p> </p>
<fieldset>
<legend>숫자 관련</legend>
<ul>
<li><p>숫자 입력</p><input type="number" min="1" max="5" value="1"></li><p> </p><p> </p>
<li>
<label class="reg" for="member">참여인원<small>(최대10명)</small></label>
<input type="number" id="member" value="1" min="0" max="10" step="1">
</li>
<p> </p><p> </p>
<li>
<label class="reg" for="satis">희망 단계<small>(하,중,상)</small></label>
<input type="range" id="satis" value="1" min="1" max="3">
</li>
</ul>
</fieldset>
<p> </p><p> </p>
<fieldset>
<legend>신청 과목</legend>
<p>이 달에 신청할 과목을 선택하세요 (1과목만 가능)</p>
<label><input type="radio" name="subject" value="speaking">회화</label>
<label><input type="radio" name="subject" value="grammar">문법</label>
<label><input type="radio" name="subject" value="writing">작문</label>
</fieldset>
<p> </p><p> </p>
<fieldset>
<legend>메일링</legend>
<p>메일로 받고 싶은 뉴스 주제를 선택해 주세요 (복수 선택 가능)</p>
<label><input type="checkbox" name="mailing1" value="news">해외 단신</label>
<label><input type="checkbox" name="mailing2" value="dialog">5분 회화</label>
<label><input type="checkbox" name="mailing3" value="pops">모닝팝스</label>
</fieldset>
<p> </p><p> </p>
<fieldset>
<legend>과 티셔츠 설문</legend>
<p>올해 과 티(T)를 만들려고 합니다. 원하는 색상을 추천해 주세요.</p>
<label>선호색상 <input type="color" value="#00ff00"> </label>
</fieldset>
<p> </p><p> </p>
<fieldset>
<h3>date,month,week</h3>
<label>시작일<input type="date" id="start"></label>
<label>종료일<input type="date" id="end"></label>
</fieldset>
<p> </p><p> </p>
<fieldset>
<h3>대관시간을 선택하세요(오늘)</h3>
<label>시작 시간<input type="time" value="09:00" id="start1"></label>
<label>종료 시간<input type="time" value="18:00" id="end1"></label>
<p> </p><p> </p>
<h3>대관시간을 선택하세요(다른날짜)</h3>
<label>시작 시간<input type="datetime-local" value="2016-03-02T09:00" id="start2"></label>
<label>종료 시간<input type="datetime-local" value="2016-03-02T18:00" id="end2"></label>
</fieldset>
<p> </p><p> </p>
<form action="register.php" method="post">
<label> 메일 주소 <input type="text"></label>
<input type="submit" value="제출">
<input type="reset" value="다시입력">
</form>
<p> </p><p> </p>
<form>
<input type="button" value="새 탭 열기" onclick="https://ljg960730.tistory.com/">
</form>
<p> </p><p> </p>
<label>파일 첨부하기<input type="file" /></label>
</form>