form태그 input태그 select태그 필수값

        form요소는 사용자 입력을 위한 요소로 사용자로부터 정보를 수집하는 역할을 한다

 

        action - 정보를 건네받는 곳을 지정

        method - 해당 정보가 전송되는 방식 (get/post)

 

        type - 입력 태그의 유형

        value - 입력 태그의 초기화값 또는 사용자가 입력한 값

        

        name - 입력 태그의 이름, 서버로 전달될 때 이름에 값을 붙여서 전송

 

    <form action="result.html" method="post">

        <input type="text" name="" id="">

        <input type="password" name="" id="">

        <input type="checkbox" name="" id="">

        <input type="radio" name="" id="">

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

        <input type="tel" name="" id="">

        <input type="number" name="" id="">

        <input type="date" name="" id="">

        <input type="range" name="" id="">

        <input type="image" name="" id="">

        <input type="button" value="전송">

        <input type="submit" name="" id="">

        <input type="reset" name="" id="">

 

        <input type="color">

        <input type="month">

 

        <select name="" id="">

            <option value="">  1 </option>

            <option value=""> 2  </option>

            <option value="">  3 </option>

        </select>

    </form>

   

form>fieldset>legend  - table태그의 설명태그인 caption태그와 비슷한 form태그의 설명태그

 

<form>

   <fieldset>

      <legend>정보</legend>

 

   </fieldset>

</form>

<form action="result.html" method="get">
            <fieldset>
                <legend>회원가입폼</legend>

                <table border="1">
                    <tr>
                        <th>이름</th>
                        <td>
                            <input type="text" name="username" id="">
                        </td>
                    </tr>
                    <tr>
                        <th>비밀번호</th>
                        <td>
                            <input type="password" name="pwd" id="">
                        </td>
                    </tr>
                    <tr>
                        <th>취미</th>
                        <td>
                            <input type="checkbox" name="hobby" id="reading" value="reading">
                            <label for="reading">독서</label>
                            <input type="checkbox" name="hobby" id="movie" value="movie">
                            <label for="movie">영화보기</label>
                        </td>
                    </tr>
                    <tr>
                        <th>성별</th>
                        <td>
                            <input type="radio" name="gender" id="male" value="male">
                            <label for="male">남성</label>
                            <input type="radio" name="gender" id="female" value="female">
                            <label for="female">여성</label>
                        </td>
                    </tr>
                    <tr>
                        <th colspan="2">
                            <input type="submit" value="전송">
                        </th>
                    </tr>
                </table>
            </fieldset>
         </form>

 

체크박스와 글을 연결해주기 위해 <label for="input의 id와 동일한 값"></label>로 글 묶어주기, input에 value값 설정 - 웹접근성, 스크린리더기로 읽어주기위함

<label>로 연결해줄경우 글을 클릭해도 input입력창으로 커서가 이동함