목차
- <input type="text"> 예제 - 1줄 텍스트 입력
- <input type="text"> 정의
- <input type="text"> 구문
- <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. 파란색코드가 없으면, 높이가 다르게 됨. 예제보기
