이번 글에선 입력폼에 대해 알아보도록 하자
<form> 태그는 사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의할 때 사용합니다.
[입력 폼]
- form 태그 내에서 정의
- 입력을 담당하는 태그 : input
- 입력 유형 : text, radio, checkbox, select, textarea
- 입력 처리 방법 : button(버튼)을 통해 submit(서버로 전송)
- 서버로 전송되는 데이터는 form 태그 내에 있어야 한다.
먼저 form태그를 정의 해 주자.
<form action="http://www.daum.net" method ="post"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
</form>1. action : a태그의 href와 유사한 기능.
입력 받은 데이터를 처리할 서버상의 스크립트 파일의 주소를 명시한다
2. method : 입력받은 데이터를 전달하는 방식으로 get 과 post 방식이 있다.
- get : url뒤에 ?표를 이용하여 전송(보임) / 입력값을 그대로 받는 방식
- post : 내부적으로 표준규약에 의해 전송(안보임)
3. oninput() : 입력되는 값이 있는 경우 자동으로 호출되는 함수이다.
4. parsInt() : 모든 입력값은 문자열이다. 따라서 연산을 할 경우 int(숫자)로 형변환을 해야한다.
form정의를 했으므로 내용을 채워 줍시다.
1. input
input에서 받은 값은 value값으로 들어간다. value값을 지정해주면 미리 입력되어 있다.
1-1. readonly : 읽기전용으로 만들기, 입력불가 주로 수정페이지에서 수정하지 않아도 되는 항목에 사용한다.
ex)회원정보변경 페이지의 id
<!-- 아이디 : asdf1234 -->
아이디 : <input type="text" name="id" value="asdf1234" size="50" readonly>아이디 :
1-2. insablde : 입력창 비활성화 시키기
<!-- disabled : 비활성화 시키기 / insabled : -->
아이디 : <input type="text" name="id" value="asdf1234" size="50" disabled>아이디 :
1-3. maxlength : 입력값의 길이를 제한
<!-- maxlength : 입력값의 길이 제한 -->
아이디 : <input type="text" name="id" value="asdf1234" size="50" maxlength="10">아이디 :
1-4. password type
아이디 말고 패스워드는 따로 타입에서 분류되어있다.
패스워드 타입을 사용하게 되면 우리가 일반적으로 로그인할때 보는것처럼 입력값이 ···표시로 표시된다
패스워드 : <input type="password" name="pw" value="pw">패스워드 :
2. radio버튼
2-1. radio 버튼 만들기
vlaue를 생략하면 텍스트는 가능하지만 radio 방식은 안된다.
<input type="radio" vlaue="m"> 남자 <br/>
<input type="radio" vlaue="f"> 여자 <br/>
<input type="radio" vlaue="o"> 기타남자
여자
기타
2-2. 이름을 지정하여 중복값 제거하기
이름을 지정하지 않으면 값이 중복으로 체크되지만 이름을 지정하면 중복으로 체그되지 않는다.
<input type="radio" name="gender" vlaue="m"> 남자 <br/>
<input type="radio" name="gender" vlaue="f"> 여자 <br/>
<input type="radio" name="gender" vlaue="o"> 기타남자
여자
기타
2-3. checked : 선택값 미리 지정하기
<input type="radio" name="gender" vlaue="m"> 남자 <br/>
<input type="radio" name="gender" vlaue="f" checked> 여자 <br/> <!-- checkde 미리 지정되어있게 함 -->
<input type="radio" name="gender" vlaue="o"> 기타남자
여자
기타
3. select
drop down list라고도 한다.
selected를 사용하면 checked처럼 미리 체크되는 값을 지정할수 있다.
<!-- select(Drop Down list 라고도 합니다.) 처리 -->
차종선택 :
<select name="cars">
<option value="volvo">volvo</option>
<option value="saab">saab</option>
<option value="audi" selected>audi</option> <!-- selectde : 미리 선택된 기본값으로 지정 -->
</select>차종선택 :
4. textarea
여러줄 문장을 입력하고자 할때사용
<textarea name="contens" rows="10" cols="30">
여기에 입력해주세요!!
</textarea>
5. datalist
datalist 요소는 input 요소에 대해 미리 정의된 옵션 리스트를 명시해 주는 요소 이다.
사용자는 텍스트를 바로 입력해도 되고, 드롭다운 메뉴에서 미리 정의한 옵션 중의 하나를 골라도 된다.
단, input 요소의 list 속성값이 datalist 요소의 id 속성값과 반드시 일치해야 연결된다.
<!-- datalist 속성 -->
<input list="browsers" name="browsers">
<datalist id="browsers">
<option value = "Internet Explorer">
<option value="Chrome">
<option value="Firefox">
</datalist>
6. output
출력값을 나타내준다.
<!-- output(출력) 태그 처리 -->
0
<input type="range" id="a" name="a" value="50">
100
+
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>0 100 + =
원래 바를 움직이면 해당 출력값이 = 옆에 표시된다....
6. button
button 태그는 input type의 submit과 유사하게 사용된다. 다만, 자바스크립트를 통해 속성들을 처리해야한다.
onclick은 버튼이 눌렸을때를 의미한다.
onclick alert()는 버튼이 눌렸을때 작은 창 하나를 만들어 띄운다.
<input type="submit" value="저장">
<button type="button" onclick="alert('마우스 클릭됬습니다.')">저장하기</button>
6-2. 함수 지정하기
헤더 영역에서 스크립트 태그를 만들어 함수를 생성합니다.
<script type="text/javascript">
// 함수 생성하기
function goView(){
alert("함수가 호출 되었습니다.")
}
</script>그리고 다시 바디영역에 와서 버튼을 만들어 줍니다.
그 뒤에 버튼이 눌렸을때 함수가 실행되게 연결해줍니다.
<button type="button" onclick="goView()">자바스크립트 함수</button>
'wab' 카테고리의 다른 글
| 02_javascript기초_변수처리하기 (0) | 2023.03.16 |
|---|---|
| 01_javascript기초_함수만들기 (0) | 2023.03.16 |
| CSS기초_기초_수직_네비게이션 (0) | 2023.03.13 |
| CSS기초_테이블_행단위_색입히기 (0) | 2023.03.13 |
| 15_HTML_태그소개_iframe (0) | 2023.03.13 |
