HTML5 동영상강좌 바로가기

HTML 태그 - input

본문

 

HTML 태그 - input

<input>태그는 폼양식에서 사용자의 입력을 받을 때 사용합니다. 웹페이지에서 보이는 입력항목, 체크박스, 버튼, 텍스트박스 등이 이 태그로 만든 것입니다.

속성

type컨트롤의 형태를 설정합니다. text, password, checkbox, radio, file, submit등이 있으며 html5에서 추가된 email, url, number, range, date, datetime, search, color등이 있습니다. 지정되지 않으면 텍스트박스가 생성됩니다.

autocompleteon, off의 값을 가지며 브라우저에 의해 값이 자동으로 완성할지를 결정합니다. html5에서 추가되었습니다.

autofocus이 속성이 지정되면 웹페이지가 로딩되었을 때 자동으로 입력필드에 커서가 나타나게 됩니다. html5에서 추가되었습니다.

checkedradio, checkbox타입에서 이 속성이 지정되면 선택된 상태가 됩니다.

placeholder컨트롤에 입력할 수 있는 값에 대한 힌트를 보여줄 때 사용합니다. html5에서 추가되었습니다.

readonly사용자가 컨트롤 값을 수정할 수 없도록 지정합니다.

value컨트롤의 초기값이 지정됩니다.

 

 

샘플

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="author" content="코리아뉴스" />
  <title> html공부 </title>
  <link rel="stylesheet" type="text/css" href="default.css" / >
  <style type="text/css">
  body {
   color:red;
  }
  </style> 
 </head>
 <body>
  <section>
   <h1>input태그</h1>         
   <form action="" method="post"> 
   <fieldset>
   <legend>폼 테스트</legend>
   <label for ="fname">성명</lavel>
   <input id="fname" type="text" placeholder="실명으로" autofocus required>
   <label for ="fe-mail">이메일</lavel>

   <input id="femail" type="email" placeholder="abc@abc.com">
   <label for ="fphone">전화번호</lavel>
   <input id="fphone" name="phone" placeholder="02-1111-1111" required>
   <label for ="fsubject">선호과목</lavel>
   <select name="fsubject">
    <optgroup label="전공1">
    <option value="html">html</option>
    <option value="css">css</option>
    <option value="java">java</option>
    </optgroup> 
    <optgroup label="전공2">
    <option value="리눅스">리눅스</option>
    <option value="보안">보안</option>
    <option value="프로그램">프로그램</option>
    </optgroup> 
    <optgroup label="전공3">
    <option value="html5">html5</option>
    <option value="css3">css3</option>
    <option value="javascript">javascript</option>
    </optgroup> 
   </select> 
   <label for ="fcontent">내용</lavel>
   <textarea name="fcontent" rows="5" cols="90">내용을 적으세요</textarea>
           </fieldset>
   <fieldset>
   <input type="submit" value="저장">
   <button name="button">클릭하여 힌트를 얻으세요.</button>
   </fieldset>         
   </form>       
  </section>
  <div id="related">
   <p>영역 </p>
  </div>
  <footer>
      <address> 전화 : 031-574-3659, E-mail : master@koreanews.com </address> 
                            Copyright ⓒ 2013 Koreanews co.,  All Rights Reserved.
  </footer>
 </body> 

</html> 

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기


HTML5 동영상강좌 바로가기