HTML 쉽게 배우기 | 양식 <form> 1

안녕하세요

 

오늘을 <form>(양식)에 대해서 알아볼게요

 

<form>은 어떤 양식을 만들때 사용하는 요소입니다

양식을 만들때는 여러가지의 요소들이 사용됩니다

 

그래서 <form>편은 2파트로 나눠서 알아볼게요

 

앞서 말했듯이, 양식을 만들때는 여러가지의 요소들이 사용됩니다

사용되는 요소들은

• label
• input
• select
• button
• textarea
• fieldset
• legend

이 있습니다

input은 저번편에서 이미 알아봤죠

 

 

오늘은 label, button, 그리고 textarea를 알아 볼게요

 

 

<label>

양식을보면 여러 칸들이 있죠

이름 쓰는 칸, 주소 쓰는 칸, 경력쓰는 칸 등등

<label>은 그 칸에 이름을 달때 사용하는 요소입니다

<label>에는 for 속성이 있는데, 이 속성은 input과의 관계를 형성합니다

 

<label>은 다음과 같이 사용할수 있습니다

<label for="name">Name:</label>
<input id="name" type="text"/>

<label>
    Name:
    <input type="text" />
</label>

위처럼 <label>을 두가지 방법으로 상용할수 있는데요

<label>을 따로 사용하고 for속성으로 관계를 형성하면, 스타일적으로 자유로운 장점이 있고

<label>안에 <input>을 넣으면 편리한 장점이 있지만 스타일 적으로는 한계가 있죠

 

 

 

<textarea>

저번에본 <input>은 입력창이 한줄 밖에 없었죠

<textarea>는 더 많은양을 입력할수 있는 요소입니다

<textarea>의 기본 속성은 cols 와 rows가 있는데요

cols는 행의 수, rows는 열의 수를 뜻합니다

좀더 쉽게 말해서 cols는 <textarea>의 넓이를, rows는 높이를 조절할수 있습니다

 

<textarea>는 다음과 같이 사용할수 있습니다

<textarea cols="30" rows="10"></textarea>

 

 

 

<button>

<button>은 예상하신거 처럼 버튼을 만들때 사용합니다

버튼은 어디에서도 사용할수 있습니다

버튼을 <form>안에서 사용하면 기본적으로 양식을 서버에 제출하려고 합니다

*이 기본행동은 자바스크립트를 사용해서 제어할수 있습니다*

 

버튼에도 type속성이 있는데, 그 속성들은 submit(제출), reset(리셋), 그리고 button(버튼) 입니다

submit은 양식의 데이터를 서버로 제출합니다

reset은 양식의 데이터를 리셋합니다

button은 뭐 없어요, 아무것도 안해요; 자바스크립트로 구체적인 동작을 조작할수 있습니다

 

 

 

오늘 이렇게 양식을 만들때 사용되는 몇가지의 요소들을 알아봤습니다

다음편에서는 <select>, <fieldset>, 그리고 <legend>를 알아보고

<form>에 대해서도 좀더 알아보겠습니다

 

 

오늘도 수고하셨습니다

 

끝!