HTML 수업

웹의 신체

HTML 수업 웹의 신체

텍스트 입력

텍스트 필드

사용자로부터 텍스트 입력 받는다. 한줄 정도의 단문에 적당하고 긴 줄의 텍스트는 <textarea> 를 이용한다. 

문법

<input type="text" name="값의 이름" value="값" disabled="disabled" readonly="readonly" />
  • type : text를 사용해야 텍스트 필드가 된다. 
  • name : 입력한 데이터의 이름
  • value : 데이터의 값. 입력한 데이터의 기본 값으로 이 값이 기본적으로 텍스트 필드에 표시된다. 
  • disabled : 값으로 disabled을 지정하면 텍스트 필드가 불능 상태가 된다. 서버로 전송해도 이 속성이 설정된 컨트롤의 데이터는 서버로 전송되지 않는다. 
  • readonly : 값으로 readonly를 지정하면 텍스트 필드에 값이 입력되지 않는다. 서버로는 데이터가 전송된다. 

예제

example1.html (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<title>생활코딩</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<form action="url" method="GET">
			닉네임 :
			<input type="text" name="nickname" />
			<br />
			<input type="submit" />
		</form>
	</body>
</html>

비밀번호

보안이 중시되는 데이터의 입력을 받는다.  

예제 

example2.html (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<title>생활코딩</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<form action="url" method="GET">
			비밀번호 :
			<input type="password" name="password" />
			<br />
			<input type="submit" />
		</form>
	</body>
</html>

hidden data

화면상에 표시되지 않는 컨트롤을 생성한다. 서버로 전달할 데이터이지만 사용자에게는 노출될 필요가 없는 데이터인 경우 사용한다. 

예제

example3.html (jsfiddle, github)

<html>
	<head>
		<title>생활코딩</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<form action="url" method="GET">
			이름 :
			<input type="text" name="name" />
			<input type="hidden" name="language" />
			<br />
			<input type="submit" />
		</form>
	</body>
</html>

textarea

여러줄의 텍스트 입력 할 때 사용한다. 

문법

<textarea name="값의 이름" rows="행의 수" cols="열의 수" disabled="disabled" readonly="readonly">값</textarea>
  • rows : 입력한 행위 수 만큼 높이가 정해진다.
  • cols : 입력한 열의 수 만큼 폭이 정해진다.

예제

example4.html (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<title>생활코딩</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<form action="url" method="GET">
		    내용 : <br />
		    <textarea rows="5" cols="20"></textarea> <br />
		    <input type="submit" />
		</form>​
	</body>
</html>

댓글

댓글 본문
작성자
비밀번호
  1. NAMO
    감사합니다!
  2. JustStudy
    고맙습니다
  3. 효니
    hidden data에 대해 첨 알게 되었네요 ㅎㅎ 언제나 유용한 강의 감사드립니다 ^^
  4. 통조림
    readonly 리돈리라고 읽었는데 read-only 였군요..!
  5. 1234
    name은 여러개를 컨트롤할수있고요( 자바스크립트등에서) id는 한페이지에 하나의 아이디만 지정됨니다.)
  6. 택쭌
    아 정말 감사히 보고 있습니다. 재밌게 강의하셔서 즐겁게 배우고 있습니다. 감사합니다.
  7. 이승훈
    잘보고 갑니다~
    name 과 id 의 차이는 나도 궁금하네요~
  8. 현병진
    <input type name="", id="">에서 name과 id의 차이가 뭔가요?
  9. YellowBall
    잘 들었습니다.
  10. egoing
    브라우저가 실제 인터넷이 아닌 자기 컴퓨터에서 실행될 때는 보안의 문제로 그렇게 차단을 합니다. 무시하셔도 됩니다~
    대화보기
    • creep860
      안녕하세요. 이고잉님 강좌를 보며 이제 막 html을 배우기 시작한 초보사회인입니다^^
      input을 사용하여 표를 작성하던 중 궁금한게 생겼는데요.
      어떠한 이유인지 브라우저로 Tag를 실행하면 "Internet explorer가 이 웹페이지에서 스크립트 또는 ActiveX 컨트롤을 실행하는 것을 제한했습니다."라는 메시지가 나오는데 혹시 어떤 이유인가요?
      무엇을 잘못한 것인지 알수가 없네요ㅠ_ㅠ
    • egoing
      이런 부분은 자바스크립트를 통해서 1차적으로 제한을 하고요.
      PHP와 같은 서버측 언어에서 2차적으로 제한을 하고요.
      MySQL과 같은 데이터베이스에서 데이터에 대한 길이 제한이 걸려 있습니다.
      다층적으로 하게 되지요~
      대화보기
      • femto
        질문하나만 할게요~
        예를들어서 회원가입 창을 만들기위해서
        아이디를 텍스트필드로 만든다고 쳤을때
        글자제한을 거는 방법은없나요?
        텍스트아레아에서는 row와 cols로 제한을 뒀지만
        텍스트필드에서 이런 기능이 있나 매우 궁금합니다.
        또 오픈튜토리얼에서도 회원가입을했을 때
        아이디나 별명에서 글자제한을 두지않아서
        만약 아이디나 별명의 글자수가 엄청나게 많아진다면 어떤 결과가 생기나요?
      • brooklyn
        정말 감사합니다 :)
        대화보기
        • egoing
          아래 수업을 참고해주세요 :)

          http://opentutorials.org......173
          대화보기
          • brooklyn
            이고잉님 수업 잘 듣고 있습니다! 막 여러 강의 찾아보면서 고생했는데.. 제가 구현하고 싶은 내용은
            찾아보기가 어려워 혹시나 해서 질문해봅니다. ㅜㅜ


            제가 원하는 건 textarea에 입력한 문장을 변수로 지정해, split을 하고 싶습니다...
            가령 1.html textarea에 "I love you"라는 문장을 집어 넣는다면 자바스크립트 split함수를 통해 I / love / you
            이 결과 값을 2.html에 표현하고 싶은 것입니다. 물론 무례하게 이 부분에 대해 코딩을 부탁하는 것은 아니고요ㅜㅜ
            어떻게 저 textarea 영역을 변수로 지정해야하는지 조언을 구하고 싶습니다!
          • Geni™
            IE에서 css로 가능합니다. (ime-mode:active)
            대화보기
            • 라니
              오늘도 잘보고 갑니다!!
            • 유형찬
              감사합니다! 히든데이터는 나중에 php?까지 배우면 확실하게 와닿을 것 같네요
            • unsmart_middleage_boring
            • huziya
              헷갈리긴 하지만..어렴풋이 개념이 잡히네요^^;
            • nosugarinmycoffee
              감사드립니다.. ^ ^ 아직도 잘 모르겠지만...어렴풋이 알것 같습니다. 조금 더 공부하고 다시 돌아와서 보겠습니다.
              대화보기
              • egoing
                서버로 전송하른 데이터 중에는 사용자가 입력하지 않은 데이터도 있을 수 있어요. 그런 데이터를 전송하기 위해서 사용합니다.
                대화보기
                • nosugarinmycoffee
                  Hidden data 는 무엇을 말씀하시는건지 잘 이해가 안됩니다. ㅜ ㅜ
                • egoing
                  불가능 할 것 같습니다.
                  대화보기
                  • resu02
                    궁금한게 있습니다.
                    예를 들어 이름이란 칸에 입력할 때 내가 굳이 한글로 바꾸지 않아도 자동으로 한글로 바뀌게 할 순 없나여?
                    그러니까 이름 칸에 입력받는 문자를 영문이 아닌 한글로 고정시킬순 없는건가여?
                  • 나그네
                    좋은강의 감사합니다
                  • 앎이앓이
                    좋은강의 감사합니다. 잘 보고 있습니다.!
                  • Hyunduk Yi
                    잘봤습니다.~
                  • egoing
                    password 타입도 get방식으로 날라갈 수 있습니다.
                    2013/6/24 Disqus <notifications@disqus.net></notifications@disqus.net>
                    대화보기
                    • ppwangji
                      감사히 잘 듣고 있습니다! ^^ 혹시 지금 질문해도 되는지 모르겠지만...GET방식에서는 url에 파라미터 값이 나타난다고 하셨는데 패스워드 타입으로 전송을 하면 url에는 값이 나타나지는 않는가요?좋은 강의 항상 감사합니다
                    • Jeein Kay Kim
                      목소리도 너무 좋으시구 녹음도 깨끗하게 잘 되었네요~프로그래밍에 대해 아는 것이 없는데 이 블로그를 보면서 보이지 않던 것들이 하나 둘씩 눈에 들어오네요. 좋은 강의 만들어 주셔서 감사합니다 ^^
                    • Jae Sung So
                      잘 봤습니다~ :)
                    • Jae Sung So
                      잘 볼게요~
                    • Jmogoon
                      수고하셨습니다.
                    • Myoha77
                      전 초보 웹디자이너입니다..코딩이 재밌긴 한데..공붛기에 너무나 막막해요..그나마 이수업을 아레되서 얼마나 기쁜지...근데..너무 막막하고 질문도 많네요..여기에 질문하면 될까요??수업 너무나 잘 듣고 있습니다추운날 감기조심하세요..^^
                    • Myoha77
                      Type your comment here.둘 다 사용하는데 큰 차이가 없나요??
                      <input type="text">는 오류가 생기기 쉽다 하신거 같은데 사용하는이유가 뭔가요??
                    버전 관리
                    egoing
                    현재 버전
                    선택 버전
                    graphittie 자세히 보기