본문 바로가기
React

input태그와 textarea를 React에서 사용하기

by flykimjiwon 2022. 4. 28.
반응형

이와같은 textarea를 리액트에서 사용하려면 몇개 속성을 수정해줘야한다.

<label for="story">Tell us your story:</label>

<textarea id="story" name="story"
          rows="5" cols="33">
It was a dark and stormy night...
</textarea>

이와같은 녀석을

<label htmlFor="story">Tell us your story:</label>
<textarea onChange={handleDes} id="story" name="story"
                rows={5} cols={33}>

              </textarea>

아래와 같이 바꿔서 써줘야한다.

rows와 cols는 {}안에 속성값을 넣어줘야하고

for같은거는 htmlFor로 바꿔써줘야 한다.

 

 

- 참고한링크

 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/textarea

 

<textarea> - HTML: Hypertext Markup Language | MDN

HTML <textarea> 요소는 멀티라인 일반 텍스트 편집 컨트롤을 나타냅니다.

developer.mozilla.org

https://www.pluralsight.com/guides/how-to-use-multiline-text-area-in-reactjs

 

How to Use a Multiline Text Area in ReactJS | Pluralsight

After going through the complete guide, you can see how the textarea can be used in React. For example, you can use input as textarea, the tag, or create a shared textarea component.

www.pluralsight.com

https://velog.io/@solmii/TIL-HTML%EC%9D%98-input-textarea-15hm8sqe

 

TIL) HTML의 input, textarea

text를 입력하는 input과 textarea 속성에 대해 정리하고, CSS에서 어떻게 스타일링 할 수 있는지도 간략히 정리!

velog.io

https://www.codingfactory.net/11611

 

HTML / textarea / 여러 줄의 문자열을 입력할 수 있는 양식

textarea textarea는 여러 줄의 긴 문장을 입력할 수 있는 양식이다. 문법 <textarea></textarea> 예제 col 속성(attribute)으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있다. 하지만, 크기 등 모양은 CSS

www.codingfactory.net

 

반응형