[HTML]form 태그 기본정리

<form> 태그를 이용하면 설문지나 제출양식 등을 만들 수 있다. 특히, <input> 태그를 이용하면 여러가지 기능을 표현할 수 있게 된다. <input> 태그는 닫는 태그가 아니다. 

 

type의 속성들과 함께 여러가지를 정리했다.

 

 ○ text, password text 값과 달리 password 속성은 암호처리가 되어 텍스트가 보이지 않는다. 

<form>
아이디 : <input type="text"><br>
비밀번호 : <input type="password">
</form>

 

 ○ 체크박스checkbox 사각형 모양의 체크박스

<input type="checkbox"> 체크박스

 

 ○ <input> 태그만 사용하면 캡션을 클릭하면 체크가 되지 않는다.

     하지만 <label> 태그로 감싸면 캡션 텍스트를 클릭해도 체크박스가 선택이 된다. 

<label><input type="checkbox"> 체크박스 </label>

 

 ○ 라디오 버튼radio type 속성을 radio로 지정하면 원여러 개의 항목 중 하나만 선택하게 할 수 있다. 다만, radio 값만       으로는 한 번 선택되면 체크를 번복할 수 없다.(선택도 중복으로 된다.)

     따라서 그룹을 묶어주는 name 속성을 지정해야 한다.

<input type="radio" name="group1"> 1번
<input type="radio" name="group1"> 2번 <p>

<input type="radio" name="group2"> 3번
<input type="radio" name="group2"> 4번

 group1의 1번, 2번 중 하나만 선택할 수 있고 group2의 3번, 4번 중 하나만 선택할 수 있다. 

 

 radio와 checkbox의 기본값 지정 속성은 checked

 

 ○ 파일선택file 

<input type="file"> 파일선택

 

 ○ <select> 태그, <option> 태그 선택지 제공. value="selected"는 기본값 지정이다.

<form>
	<select name="area">
		<option value="selected"> 기본값 </option>
		<option value="가"> 가 </option>
		<option value="나"> 나 </option>
		<option value="다"> 다 </option>
		<option value="라"> 라 </option>        
	</select>
</form>

 

○ <textarea> 태그 텍스트 입력창. rows 속성으로 가로, cols 속성으로 세로의 길이를 정할 수 있다. 또한 브라우저 내에서도 알아서 조절이 된다.

<form>
	<textarea rows="20" cols="60"> 입력해주세요 </textarea>
</form>

 

○ button, submit, reset 버튼형식 value 속성으로 버튼명 지정 가능.

<form>
	<textarea rows="20" cols="60"> 입력해주세요 </textarea><p>
    <input type="button" value="그냥버튼"><br>
    <input type="submit" value="제출 버튼"><br>
    <input type="reset" value="입력내용 초기화"><br>
</form>

 ○ <button> 태그 이미지 형식의 버튼 생성 가능.

<button type="button"> <image src="img01.png"> </button>
<button type="submit"> <image src="img02.png"> </button>
<button type="reset"> <image src="img03.png"> </button>

 

 ○ <fieldset> 태그 그룹묶기

    <legend> 태그 legend는 명각이라는 뜻으로, fieldset으로 묶인 그룹의 이름을 명명한다.

<fieldset> <legend>색상선택</legend>
	<input type="checkbox" name="corlor"> red <br>
	<input type="checkbox" name="corlor"> orange <br>
	<input type="checkbox" name="corlor"> yellow <br>
	<input type="checkbox" name="corlor"> green <br>
    	<input type="checkbox" name="corlor"> blue <br>
</fieldset> <p>

만약 그룹 자체를 활성화시키지 않으려면 fieldset 태그에 disabled 속성을 걸면 된다.

 

 ○ number 스핀버튼  range 슬라이드 바 

    min 속성은 최솟값, max 속성은 최댓값, step 속성은 값의 단위, value 속성은 초기값 지정.

 

<input type="number" min="0" max="100" value="60" step="0.5"> 평균점수 <br>
투명도 : 
0 <input type="range" min="0" max="100" value="30"> 100

----------------------------------------------

 

hr 태그=horizontal rule 수평선 긋기