본문 바로가기
HtmlCss/HTML

<fieldset>태그와 <legend>태그

by 플람 2019. 5. 25.
  -->
        <form>
            <fieldset style="width:300px;">
                <legend>인적사항</legend>
                이름 : <input type="text" name="irum" placeholder="이름 입력" autofocus><br><br>
                전화 : <input type="text" name="phone_number" placeholder="전화번호 입력"><br><br>
                주소 : <input type="text" name="address" placeholder="주소 입력" value="대전시" readonly><br><br>
            </fieldset>

            <fieldset>
                <legned>checkbox객체, radio객체와 label 연결</legned><br><br>
                좋아하는 과일 :
                    <input type="checkbox" name="aa" value ="사과" id = "test1"><label for="test1">사과</label>
                    <input type="checkbox" name="aa" value ="딸기" id = "test2"><label for="test2">딸기</label>
                    <input type="checkbox" name="aa" value ="멜론" id = "test3"><label for="test3">멜론</label>
                    <br><br>
                좋아하는 과일 :
                    <input type="radio" name="aa" value ="사과" id = "test4"><label for="test4">사과</label>
                    <input type="radio" name="aa" value ="딸기" id = "test5"><label for="test5">딸기</label>
                    <input type="radio" name="aa" value ="멜론" id = "test6"><label for="test6">멜론</label>
                    <br><br>    
            </fieldset>
        </form>       

<fieldset>태그

입력 요소들을 그룹으로 묶어서 표현할 때 사용하는 태그

<legend>태그 

fieldset태그의 하위 태그로 fieldset의 제목을 지정할때 사용한다.

 

입력 요소에 사용하는 속성들

placeholder  입력 힌트를 희미하게 보여 준다.

autofocus  페이지가 로드되면 자동으로 포커스를갖는다.

readonly  읽기 전용상태로 만든다.

disabled  객체를 비활성화 시킨다. 이 속성이 설정된 입력요소의 데이터는 서버로 전송이 안된다.

'HtmlCss > HTML' 카테고리의 다른 글

div, article, section 정리  (0) 2020.03.19
HTML5 추가요소  (0) 2019.05.25
<Form>태그  (0) 2019.05.25
<Table>태그  (0) 2019.05.25
특수문자  (0) 2019.05.25