반응형
<form action="#" method="get" name="f1">
<fieldset>
<legend>폼 제어</legend>
<p>
<label for="user_pw1">비밀번호</label>
<input type="password" name="user_pw1" id="user_pw1" />
</p>
<p>
<label for="user_pw2">비밀번호 확인</label>
<input type="text" name="user_pw2" id="user_pw2">
<input type="submit" value="확인" />
</p>
</fieldset>
</form>
- 동적인 웹페이지를 위해서 반드시 필요한 요소
- 회원가입, 글쓰기 등 폼안에 입력된 데이터를 서버로 전달해서 처리
<form>
속성
-method : 폼 전송 방식 post/get
-name : 여러개 폼이 있는 경우 폼을 구별하기 위한 이름지정
-action : 폼을 전송할 서버의 스크립트 파일 지정
-target : 현재창이 아닌 다른 창으로 열리도록 지정
- onsubmit : action 속성을 활용하지않고, onsubmit 이벤트를 활용해서 스크립트로 처리가 가능
<label>
폼 요소에 어떤 값을 넣어야 하는지 이름을 붙힘
<fieldset>
폼 안에 여러구역을 나눠 표시할 때 사용
관계된 요소들끼리 묶어 그룹화 할 때 주위에 테두리를 이용하여 박스를 그린다.
<legend>
fieldset에 제목을 달아준다. (네모 박스 선 중간)
<input> 요소
1. 텍스트 입력(text)
2. 비밀번호 입력(password)
3. 라디오 버튼(radio)
4. 체크박스(checkbox)
5. 파일 선택(file)
6. 선택 입력(select)
7. 문장 입력(textarea)
8. 버튼 입력(button)
9. 전송 버튼(submit)
10. 필드셋(fieldset)
value : input 태그가 가지고 있던 값 (입력한 값)
반응형
'html, css, bootstrap' 카테고리의 다른 글
css_position (0) | 2022.11.11 |
---|---|
css_flexbox (0) | 2022.11.11 |
bootstrap_panel (0) | 2022.11.09 |
bootstrap_navigation (0) | 2022.11.09 |
bootstrap_collapse (0) | 2022.11.09 |