본문 바로가기
html, css, bootstrap

html_form,input

by 신방동불주먹 2022. 11. 11.

<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