Appia의 IT세상

[초보HTML배우기 12]HTML - Form - Text Input 생성하기 (input, textarea) 본문

Programming/HTML&CSS

[초보HTML배우기 12]HTML - Form - Text Input 생성하기 (input, textarea)

Appia 2020. 7. 31. 07:37
반응형

[초보HTML배우기 12]HTML - Form - Text Input 생성하기 (input, textarea)

 

이번 포스팅은 HTML에서 특정 Form에 대해서 이야기를 해보고자 합니다. HTML에서는 많은 형태의 Form을 제공하고 있습니다. 이 중에서 이번 포스팅에서는 Text Input에 대해서 생성해보도록 하겠습니다. 

 

Text Input 관련된 생성 부분 

Text Input에 관련된 부분은 텍스트를 입력할 수 있게 해주는 부분입니다. 여기에선 크게 셋 가지로 나누어서 볼 수 있습니다. 

 

한줄 테스트 박스 - 오직 한줄에 텍스트를 입력할 수 있는 텍스트 박스 생성 

Password 테스트 박스 - 입력된 글자가 노출되지 않는 텍스트 박스 생성

다중라인 테스트 박스 - 여러줄을 입력할 수 있는 텍스트 박스 생성 

 

그럼 위의 부분을 바탕으로 각 부분에 대해서 생성하는 코드를 작성해보도록 하겠습니다. 

 

<한줄 텍스트 박스>

오직 텍스트를 한줄만 입력할 수는 있는 텍스트 박스를 생성해보도록 하겠습니다. 다음 코드를 살펴보겠습니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form >
        이름 : <input type = "text" name = "first_name" />
        
        성   : <input type = "text" name = "last_name" /> 
     </form>
</body>
</html>
 
cs

 

위의 코드를 기반으로 작성된 코드의 결과는 다음과 같은 화면입니다. 

Text Input 관련된 생성 부분 

위의 input 태그의 속성은 다음과 같습니다. 

type text 박스의 type을 결정, 한줄 라인을 text 을 입력
name 상기 텍스트 박스의 이름을 지정, 향후 다른 web기반 스크립트등에서 관련된 부분에 대해서 접근시 사용 
value 텍스트 박스의 초기값
size 사용자가 입력할 수 있는 최대 글자 수 

 

<Password 텍스트 박스 >

비밀번호등을 입력할 수 있는 텍스트 박스를 생성해보도록 하겠습니다. 먼저 다음 코드를 한번 살펴보겠습니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form >
        아이디 : <input type = "text" name = "userid" />
        
        비밀번호 : <input type = "password" name = "password" /><br>
     </form>
</body>
</html>
cs

위의 코드를 실행하면 다음과 같은 결과가 나타납니다. 

코드 실행된 결과 

그럼 위의 코드로 작성된 html에서 한번 살펴보겠습니다. 그럼 위의 보이는 텍스트를 바탕으로 텍스트를 입력해보도록 하겠습니다. 

위의 코드로 작성된 결과에 텍스트 입력 결과 

위에서 한줄 텍스트 박스 생성시와 모든 부분이 동일하나 type = "password"로 변경하셔야 합니다. 

 

<다중라인 텍스트 박스>

다중 텍스트를 생성하기 위해서는 다른 태그를 사용하셔야 합니다. 먼저 코드를 보고 이야기를 해보도록 하겠습니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form >
        <textarea rows = "10" cols = "100" name = "description">앱피아</textarea>
     </form>
</body>
</html>
cs

위를 실행한 결과는 다음과 같습니다. 

다중 텍스트 박스 생성 결과 

그럼 위의 부분에서 사용된 속성들을 살펴보겠습니다. 

name 향후 web기반의 언어등에서 사용할 이름을 명시
row text area의 열 
cols text area의 행

 

이번 포스팅은 [초보HTML배우기 12]HTML - Form - Text Input 생성하기 (input, textarea)라는 주제로 텍스트를 입력할 수 있는 텍스트 박스를 생성해봤습니다. 혹시 문의 사항및 궁금하신 점이 있으면 언제든지 댓글 및 방명록에 글 남겨주시길 바랍니다. 

 

반응형
저작자표시 비영리 변경금지

'Programming > HTML&CSS' 카테고리의 다른 글

[초보HTML배우기 14]HTML - Form, 라디오 버튼(radio button)만들기(input)  (0) 2020.08.07
[초보HTML배우기 13]HTML - Form, Checkbox만들기(input)  (0) 2020.08.04
[초보HTML배우기 11]HTML - 이미지를 배경 설정하기  (0) 2020.07.29
[초보HTML배우기 10]HTML - 태그 항목 그룹화 하기(span, div)  (0) 2020.07.27
[초보HTML배우기 09]HTML - HTML에 하이퍼 링크(hyper-link)연결하기  (0) 2020.07.25
'Programming/HTML&CSS' Related Articles more
Comments