[HTML] Text Input

안녕하세요 동기 여러분! 오늘은 Text Input을 넣는 방법에 대해 알아보도록 합시다!

 

Text Input

<input> 요소는 type 속성을 가지고 있는데 이는 어떠한 웹 페이지를 나타내고 데이터를 받아들일 수 있는지를 결정합니다.

 

우리가 알아볼 타입은 바로 "text" 타입입니다.

 

---

type="text"

<input> 요소와 type="text"이 함께 오면 사용자들은 빈 공간에 텍스트를 넣을 수 있게 됩니다. (항상 기본 type은 text입니다)

 

여기서 중요한점은 <input> 요소에 name 속성 없이 실행하면 <form>이 HTTP request에 의해 보내어질 때 <input>에 있는 정보들은 전달이 되지 않습니다.

 

---

 

생김새

<form action="/ex.html" method="POST">
	<input type="text" name="rname">
</form>

이 코드를 실행하면 다음과 같은 화면이 나옵니다.

 

크롬에서의 실행 화면입니다. 다른 브라우저는 다를 수 있음.

 

---

 

동작 원리

사용자가 위의 사진과 같은 빈칸에 문자를 써서 넣으면 컴퓨터는 어떻게 동작하는지 알아 봅시다.

 

예를 들어

빈칸에 there is no cow level라고 써넣으면 there is no cow level이 값(value)이 됩니다.  값은 name과  짝을 짓게 되는데요, 우리가 위에서 설정한 name이 "rname"이었으니까 <form>이 /ex.html로 보내어질 때 "rname=there is no cow level"이라는 값으로 보내어지게 됩니다.

 

---

 

미리 값을 지정해 놓기

미리 값을 지정해 놓는 방법도 있습니다. 

 

<form action="/ex.html" method="POST">
	<input type="text" name="rname" value="what u wanna say bruh?">
</form>

value="what u wanna say bruh?"를 추가해보고 실행해보겠습니다.

 

오호라 값이 미리 들어가 있는군요? 

 

이와 비슷한 기능으로 placeholder가 있습니다.

<form action="/ex.html" method="POST">
	<input type="text" name="rname" placeholder="what u wanna say bruh?">
</form>

value를 placeholder로 바꿔서 실행해 보록 하겠습니다.

 

글자색이 회색으로 변함

 

value = 초기값 (아무것도 적지 않고 실행하면 초기값이 전송됨)

placeholder = 안내문구 (아무것도 적디 않고 실행하면 아무것도 전송되지 않음)

 

---

 

예

placeholder는 아주 많이 사용되는 속성이기에 알아두면 좋을 것이라 생각합니다.

 

롤 전적 검색 사이트 OP.GG의 소환사 검색창

 

 

---

 

오늘의 느낌

먹고 싶은 거 다 먹어도 살은 안 쪘으면 좋겠다...