사진과 음악을 좋아하는 개발자 지망생의 블로그

[Web Scraping 기초] HTML - 양식 태그 (form, 설명과 입력, 버튼) 본문

개발/웹 스크래핑

[Web Scraping 기초] HTML - 양식 태그 (form, 설명과 입력, 버튼)

devculture309 2023. 4. 17. 21:20
반응형
<!DOCTYPE html>
<html lang="kor">
  <head>
    <title>양식태그 form</title>
  </head>
  <body>
    <form action="/html/example08_1.html" method="get"> 
        <label for = "username">아이디 </label>
        <input id = "username" type="text" name="ID" value="1234">
        <input type="text" name="ID" readonly value="1234">  <!-- id값은 html문서 안에서 무조건 한번만 써야한다. unique id라고 알아두면 된다 / readonly를 추가하면 입력이 불가능하며 여기서 value값을 추가하면 value값을 고정할 수 있다-->
        <input type="text" name="ID" value="1234" disabled> <!-- 해당 input 비활성화-->
        <label>비밀번호 
            <input type="password" name="Password" placeholder="패스워드를 입력하세요">     <!-- placeholder 보여줄 수 있는 공간이 필요하다 -> option, radio, checkbox, button X-->
        </label>
        
        <label for="option">옵션선택</label>
        <select id = "option" name = 'opt' required>
            <option value="">선택하세요</option>            <!-- 선택하세요 란을 빈값으로 명시하고 required로 설정하면 필수 옵션으로 설정할 수 있다-->
            <option>옵션1</option>
            <option value = "옵션2-값">옵션2</option>
            <option value = "옵션3-값">옵션3</option>
            <option>옵션4</option>
            <option>옵션5</option>
        </select>
        <input id = "agree" type="checkbox" value="true" name = "checkbox" required>
        <label for="agree">약관에 동의합니다</label>
        <br><br><br>
        <input type="radio" name = "number" value = "1" required> 1      <!-- name이 동일해야 radio체크 버튼 하나만 생성하는 것이 가능하다-->
        <input type="radio" name = "number" value = "2" required> 2      <!-- radio타입의 required 옵션을 추가하면 모든 번트에 추가해야한다-->
        <input type="radio" name = "number" value = "3" required> 3
        <input type="radio" name = "number" value = "4" required> 4
        <br><br><br>
        <input type="file">     <!-- 브라우저에 따라 버튼 모양이 다르다-->
        <br><br><br>        
        <input type="button" value = "I'm button">
        <br><br><br>
        <input type="hidden" name = "where" value = "samplecode"> <!--주소창에 간단한 정보를 보여줄 때도 사용할 수 있다-->
        <br><br>
        <textarea name="text_area" id="" cols="30" rows="10">안녕하세요</textarea>
        <textarea name="text_area" id="" cols="40" rows="40">
            안녕하세요
        </textarea>
        <button type="submit">전송</button>   
    </form>
</html>

1) FORM

① <form>

  - 정보를 제출하기 위한 태그

  - 정보를 입력하고 선택할 수 있는 input, selectionbox, textarea 등을 가질 수 있다

  - 정보를 제출하기 위한 button을 가진다

  - "action"속성으로 정보가 제출되었을 때 페이지를 이동시킬 수 있다

  - "method" 속성으로 정보가 제출될 대 처리 방식을 결정할 수 있다

 

2) 입력과 출력

① <label>

  - input, textarea, selection의 설명을 작설할 수 있는 태그

  - "for" 속성을 사용하여 연결하고자 하는 태그에 "id" 속성을 지칭하면 label을 클릭하면 연결된 태그가 선택된다

  - label 태그 아넹 input을 넣으면 자동으로 for → id 연결과 같은 처리들을 해준다

  ※ "id" 속성은 값이 절대로 중복되면 안된다!

② <input>

  - 사용자에게 데이터를 입력 받을 수 있는 대화형 태그

  - "type" 속성의 값에 따라 받을 수 있는 input의 유형이 달라진다 (기본값 : text)

  - "value" 속성을 사용해 기본 내용을 입력 해둘 수 있다

  - "name" 속성을 사용해 input의 이름을 지정할 수 있다

  - 자주 수용되는 input 타입 : checkbox, radio, file, button, hidden

    * hidden : inut을 시각적으로 숨겨준다. 정보 제출 시 "value"속성에 입력된 값이 전송된다

③ <selelct>

  - 옵션 메뉴를 제공하는 태그

  - <option> 태그를 사용해 옵션을 정의할 수 있다

  - 첫번째 option은 이름이 된다

  - "value" 속성을 선언하지 않을 경우 <option> 태그의 콘텐츠가 기본값이 된다

  - 첫번째 옵선이 버튼명이기 때문에 "placeholder" 속성을 사용할 수 없다

④<textarea>

  - 여러 줄을 입력할 수 있는 대화형 태그

  - 콘텐츠를 넣으면 사용자가 입력하지 않아도 표시되는 기본값이 된다

  - "cols/rows" 속성으로  기본 너비와 높이를 지정할 수 있다. 너비와 높이는 글자 크기 기준으로 정의된다

  ※ 알아두면 좋은 속성

    1. readonly :  사용자가 수정할 수 없는 "읽기 전용"으로 만든다

    2. required : form이 제출될 때 "필수 입력 사항"으로 만든다. 이 때, 필수 입력에 대한 태그에 따른 안내 문구,

                       행동 등은 브라우저가 자동으로 처리해준다

    3. placeholder : input, textarea에 부가 설명을 입력해둘 수  있다. 

      * <select>, <option>, <radio>, <checkbox>, <button> 태그에선 부가 설명을 표시할 공간되지 않아 사용할 수 없다

 

3) button

  - 클릭 가능한 버튼을 태그로 <form> 태그 내에 어디서든 사요할 수 있다

  - "type" 속성을 "submit"으로 지정하면 form 양식을 제출할 수 있다.

  ※ form 태그 내 button 태그에서 "type" 속성의 기본값은 "submit"이다

  - <button> 태그 내 콘텐츠에 태그 사용이 가능하나, 블록 레벨 테그는 사용하면 안된다

  - "disabled"속성을 가질 수 있다  

반응형

'개발 > 웹 스크래핑' 카테고리의 다른 글

[Web Scraping 기초] HTTP - Requests  (1) 2023.04.18
[Web Scraping 기초] HTTP  (0) 2023.04.18
[Web Scraping 기초] HTML - 리스트, 표, 외부 콘텐츠(iframe)  (2) 2023.04.17
[Web Scraping 기초] HTML - 멀티미디어  (0) 2023.04.17
[Web Scraping 기초] HTML - 콘텐츠(Content)  (0) 2023.04.17
'개발/웹 스크래핑' Related Articles more