[HTML] textarea, input, option

button 전송처리 

<input type="button" value="제출"  onclick="send();">
</form>
<script>
//폼태그를 가져오기 위해 자바스크립트로 코딩 
function send(){
	//이벤트가 발생하는지 체크 후에 코딩
	alert("이벤트 발생 체크 후 코딩 ");
	var f1=document.getElementById("form1");
	f1.submit();
}
</script>

 

select 

• option에 value 속성값을 주어야 값이 넘어간다. 
• option에 value 값을 설정하지 않으면 text 값으로 자동 설정된다. == 같은 값이 된다. 모두
• option 시작태그와 닫기태그 중안에 써주지 않으면 빈칸으로 나타난다. datalist와 다르다.  

<form action="ex01_ok_02.jsp">
소유한 자동차를 선택하세요 
다중선택가능-multiple
<select name="cars"id="cars" multiple="multple">
<option value="BMW">BMW</option>
<option value="Kia" selected="selected">Kia</option>
<option value="Volvo">Volvo</option>
<option value="Audi">Audi</option>
 </select>
</form>
<br>
부서를 선택하세요 
<form action="ex01_ok_02.jsp">
소유한 자동차를 선택하세요 
<select name="deptno"id="deptno">
<option value="10"> ACCOUNTING</option>
<option  value="20">RESEARCH</option>
<option  value="30">SALES</option>
<option  value="40">OPERATIONS</option>
 </select>

소유한 자동차를 선택하세요 다중선택가능-multiple BMW Kia Volvo Audi

부서를 선택하세요

ACCOUNTING RESEARCH SALES OPERATIONS

여러 말을 입력받고 싶을때 - textarea

textarea에는 value값이 없다. 

input 태그에만 있다. 

하고싶은말이 길다면 :
<textarea  name="content2" rows="10" cols="40"></textarea

<textarea  name="content2" rows="10" cols="40">여기에 입력하세요</textarea>

하고싶은말이 길다면 : 여기에 입력하세요

여기에 입력하세요가 원래 박스안에 나타는데 여기는 이렇게 나타남... 

 

다중선택을 하고 싶을때는 - multiple

속성명과 속성값이 같을때는 속성값안써도 된다. 

<select name="cars"id="cars" multiple="multple">

 

컨트롤이나 시프트로 선택

 

선택 디폴트값 주기  selected="selected"

<option value="Kia" selected="selected">Kia</option

 

radio버튼  -단일체크 

id 속성은 그 요소의 고유한 이름 

name 속성은 서브밋(제출) 

 

• 라디오버튼에 name 속성이 없으면  다 선택이 가능해서 name 속성을 주어야한다. 
• name 속성들이 똑같아야 한다. - 안그러면 중복체크된다. 
• 체크 기본값 checked="checked" 
• 서버에 넘길 value 값 주기 

<form>
성별: 
 <input type="radio" name="gender" checked="checked" value="m">남자
  <input type="radio"name="gender" value="f">여자 
 <input type="submit">
 </form>

성별: 남자 여자

글씨를 눌러도 체크하고싶다면 ? 

 

label에 for 값을 주고 input 안에 id 값을 동일하게 주기

 

 <label><input type="radio" name="gender" checked="checked" value="m">남자</label>
 <label><input type="radio"name="gender" value="f">여자 </label>
   

<input type="radio" name="gender" checked="checked" value="m" id="gm"><label for="gm">남자</label>
<input type="radio"name="gender" value="f" id="gw"><label for="gw">여자 </label>

 

남자 여자 남자 여자

 

checkbox  - 다중선택 

하나의 그룹으로 묶이기 위해 name 속성을 같게 준다. 

좋아하는 과목을 모두 선택하세요 
 <br>
 <input type="checkbox"name="subject'"value="kor">국어
 <input type="checkbox"name="subject'"value="eng">영어
 <input type="checkbox"name="subject'"value="math">수학
 <input type="checkbox"name="subject'"value="phy">체육

 

좋아하는 과목을 모두 선택하세요
국어 영어 수학 체육

 

파일첨부하기

 <input type="file" name="attachFile">

첨부할 파일을 선택할 뿐이지,  서버에 파일이 업로드 되지는 않는다. 

파일 업로드 라이브러리 설치+구현 

 

파일을 여러개 업로드 하고 싶다면 ?

 <input type="file" name="attachFile" multiple="multiple">

 

input text를 숨기기 

나중에 더 자세하게 배운다고 한다. 

<input type="hidden" value="홍길동" name="content1">