[form] HTML - <input type="text"> 태그 - 1줄 텍스트 입력 (= 인풋텍스트타입/텍스트타입인풋/텍스트인풋 요소)

1. <input type="text"> 예제 - 1줄 텍스트 입력
2. <input type="text"> 정의
3. <input type="text"> 구문
4. <input type="text"> 예제 - 버튼과 높이 같게 설정

<input type="text"> 예제 - 1줄 텍스트 입력

 

<form action="/action_page.php">

  <label for="koname">한글이름: </label>

  <input type="text" id="koname" name="koname"><br>

  <label for="enname">영문이름: </label>

  <input type="text" id="enname" name="enname"><br>

  <input type="submit" value="확인">

</form>

 

결과보기

<input type="text"> 정의

 

텍스트 입력 가능한 1줄 형식의 INPUT 입력창.

 

---

 

1.

• 텍스트 필드 기본 너비: 20 글자
• <label> 태그와 함께 사용 시, 웹접근성 향상됨.

 

2. cf.

<textarea> 태그 - 여러 라인 입력 가능한 텍스트 입력 필드.

 

3.

모든 브라우저 지원.

 

4. MDN <input type="text"> 예제보기

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text

 

<input type="text"> 구문

 

<input type="text">

 

<input type="text"> 예제 - 버튼과 높이 같게 설정

 

<style>

div {margin-bottom:30px; overflow:hidden; border:1px solid red;}

div input {height:30px; line-height:30px; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;}

#a input {vertical-align: middle;}

#b input {display: inline-block;}

#c input {float:left;}   

</style>

<div>

    <form>

        <input type="text" name="id" placeholder="아이디 입력">

        <input type="submit" value="확인">

    </form>

</div>

<div id="a">

    <form>

        <input type="text" name="id" placeholder="아이디 입력">

        <input type="submit" value="확인">

    </form>

</div>

<div id="b">

    <form>

        <input type="text" name="id" placeholder="아이디 입력">

        <input type="submit" value="확인">

   </form>

</div>

<div id="c">

    <form>

        <input type="text" name="id" placeholder="아이디 입력">

        <input type="submit" value="확인">

    </form>

</div>

 

결과보기

PS. 파란색코드가 없으면, 높이가 다르게 됨. 예제보기