728x90
반응형
fieldSet
※전송한 정보가 url에 표시되도록 하려면 <form ...... method ="get">으로
표시되지 않도록 하려면 <form ...... method ="post">로 입력한다.
<body>
<form action="html08_form01_res.html" method="get">
<fieldset>
<legend>회원가입</legend>
<!-- fieldset = 네모칸 영역/ legend = fieldset안에 영역 이름 -->
<p>아이디: <input type="text" name="id"/></p>
<!-- input = (검색창 같은) 화면에서 입력해주는 태그 -->
<!-- form태그로 해당 데이터를 보내고 싶으면 name속성이 꼭 필요! -->
<p>비밀번호: <input type="password" name="pw"/></p>
<p>이메일 수신여부 <br/>
<input type="radio" name="radio" value="y"/>y<br/>
<input type="radio" name="radio" value="n"/>n<br/>
<!-- 이름을 radio로 같게 해주면 둘 중에 하나만 선택할수 있음! -->
</p>
<p>관심분야<br/>
<input type="checkbox" name="cb1" value="html"/>HTML
<input type="checkbox" name="cb2" value="css"/>CSS
<input type="checkbox" name="cb3" value="javascript"/>JS
<input type="checkbox" name="cb4" value="jquery"/>JQ
</p>
<p>
<input type="button" value="그냥버튼"/>
<input type="reset" value="취소"/>
<input type="submit" value="전송"/>
</p>
<p>
<input type="file"/>
<input type="hidden" name="hidden01" value="my hidden value"/>
</p>
</fieldset>
</form>
<!-- name속성 = key, 입력 값 =value -->
</body><script type="text/javascript">
window.onload=function(){
var val = location.search;
alert(val);
document.getElementById("val").innerHTML=val;
}
</script>
</head>
<body>
<div id="val"></div>
</body>
select 요소
<body>
<h1>select 요소</h1>
<form action="#" method="get">
<fieldset>
<legend>여러줄 글 상자와 목록상자</legend>
<p>
<label for="reply">답글</label><br/>
<textarea rows="3" cols="30" id="reply" name="re"></textarea>
<!-- label = 제목 달아주는 기능 / textarea 3줄에 30칸짜리 -->
</p>
<p>과목선택
<select name="sel01">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JS</option>
<option value="jquery">JQ</option>
</select>
</p>
<p>메뉴선택
<select name="sel02">
<optgroup label="한식">
<option value="bulgogi">불고기</option>
<option value="bibimbab">비빔밥</option>
<option value="sikhe">식혜</option>
</optgroup>
<optgroup label="양식">
<option value="pizza">피자</option>
<option value="pasta">파스타</option>
<option value="steak">스테이크</option>
</optgroup>
<optgroup label="중식">
<option value="blackbeannuddle">짜장면</option>
<option value="jjambbong">짬뽕</option>
<option value="yousansle">유산슬</option>
</optgroup>
</select>
</p>
<input type="submit" value="전송"/>
</fieldset>
</form>
</body>
728x90
반응형
'Web > HTML&CSS' 카테고리의 다른 글
| [HTML]table (0) | 2020.08.03 |
|---|---|
| [HTML]list (0) | 2020.08.03 |
| [HTML]a_링크 (0) | 2020.08.03 |
| [CSS]basic (0) | 2020.07.21 |
| [HTML]구분선, 인용문 (0) | 2020.07.21 |
