HTML5 동영상강좌 바로가기

HTML 태그 - textarea

본문

 

HTML 태그 - textarea

<textarea>태그는 폼양식에서 <input>달리 사용자의 다중행 텍스트를 받을 때 사용합니다. 많은 사이트에서 에디터 연동을 하여 사용자의 입력을 받습니다.

속성

cols컨트롤의 너비값. html5에서 기본값은 20입니다.

rows컨트롤의 라인수.

autofocus이 속성이 지정되면 웹페이지가 로딩되었을 때 자동으로 입력필드에 커서가 나타나게 됩니다. html5에서 추가되었습니다. 문서내에서 오직 하나의 컨트롤만 활성화됩니다.

name컨트롤의 이름

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

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

required양식을 완료하기 전에 반드시 입력이 필요한 요소임을 지정합니다.

 

샘플

<!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>textarea태그</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> 

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기
다음글HTML 태그 - td


HTML5 동영상강좌 바로가기