HTML Eclipse input, radio, checkbox, color, date, submit, reset, image 태그

 

 

input 태그

 

사용자가 입력하는 부분은 거의 <input> 태그를 이용해 처리
입력하는 내용의 종류는 <input> 태그의 type 속성을 통해 지정
type 속성 값에 따라 함께 사용할 수 있는 속성들도 달라진다

<label> 태그를 이용해 캡션을 붙일 수 있다
CSS를 이용해 각 요소마다 다른 형태로 꾸밀 수 있다


type 속성값

type = “hidden”
화면 상의 폼에는 보이지 않는다
폼을 서버로 전송할 때 서버로 함께 전송되는 요소

type = “text”
한 줄짜리 텍스트 입력 필드 
주로 아이디나 이름, 주소 등 텍스트 입력

type = “password”
비밀번호 입력란
사용자가 입력하는 내용이 ‘ * ’나 ‘•’로 표시된다

type = “search”
검색 필드  
검색 창에 x 표시가 되어 검색어 삭제 쉬움

type = “url”
웹 주소 필드
http://’로 시작하는 사이트 주소 입력

type = “email”
메일 주소 입력 필드
메일 주소 형식 자동 체크

type = “tel”
전화번호 입력 필드
사용자 입력을 체크하지는 않음.


<form>
    <fieldset>
      <legend>로그인 정보</legend>
      <ul>
        <li>
          <label for="user-id">아이디 </label>
          <input type="text" id="user-id">
        </li>
        <li>
          <label for="pwd1">비밀번호 </label>
          <input type="password" id="pwd1">
        </li>
        <li>
          <label for="pwd2">비밀번호 확인 </label>
          <input type="password" id="pwd2">
        </li>
      </ul>
    </fieldset>

 

 

    <fieldset>
        <legend>개인 정보</legend>
        <ul>
          <li>
            <label for="user-name">이름 </label>
            <input type="text" id="user-name">
          </li>
          <li>
            <label for="mail">메일 주소</label>
            <input type="email" id="mail">
          </li>
          <li>
            <label for="phone">연락처</label>
            <input type="tel" id="phone">
          </li>
          <li>
            <label for="homep">블로그/홈페이지</label>
            <input type="url" id="homep">
          </li>
        </ul>
      </fieldset>
      <input type="submit" value="가입하기">
    </form>

    <hr>

 

 

 

type = “number”
숫자 입력 필드. 브라우저에 따라 스핀 박스로 표시됨

type = “range”
숫자 입력 필드. 슬라이드 막대를 이용해 숫자 입력

 

 

 

Radio, CheckBox, Color

 

 

type = “radio”
여러 항목 중 하나만 선택할 때

type = “checkbox”
여러 항목 중 둘 이상을 선택할 때

name

구분하기위한 이름
라디오 같은 경우 관련그룹끼리는 반드시 같은 name을 설정해야 한다

value

선택한 것을 서버로 넘길때 사용하는 값

checked

미리선택

 

color

색상표

 

 

<form>
<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>
<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" checked="">모닝팝스</label>
</fieldset>
</form>

<input type="color">

 

 

date, month, week

type = “date”, type=“month”, type=“week”
달력을 이용해 날짜 입력

 

<fieldset>
    <legend>조회기간 선택 - date , month , week</legend>
    <label><input type="date" id="start"></label>
    <label><input type="date" id="end"></label>
</fieldset>

 

 

 

submit, reset

 

 

type = “submit”, type=“reset”
폼 전송/리셋 버튼 

 

전송(submit) 버튼 : 사용자 입력 내용을 서버로 전송
리셋(reset) 버튼 : 사용자 입력 내용 전부 삭제
value 속성을 이용해 버튼 표시 내용 지정

<fieldset>
<legend>type = “submit”, type=“reset”</legend>
<form action="register.php" method="post">
    <label> 메일 주소 <input type="text"></label>
    <input type="submit" value="제출">
    <input type="reset" value="다시입력">
    <input type="button" name = "bt" value="버튼">
</form>
</fieldset>

 

 

 

image

 

 

type = “image”
submit 버튼 대신 이미지 삽입

 

<fieldset>
    <legend>type = “image”</legend>
    <form action="/8. Table 태그1.html">
        <label>아이디 <input type="text" size="15"></label>
        <label>비밀번호 <input type="password" size="15"></label>
        <input type="image" id="butt" src="images/login.jpg"  alt="login">
    </form>
</fieldset>