HTML
0330 HTML 입력양식
ADELA_J
2023. 3. 30. 12:42
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input</title>
</head>
<body>
<form method="get">
<!--사용자가 입력하는 입력 방식-->
<p>이름
<input type="text" name="text" value="ID입니다"></p>
<p>비밀번호
<input type="password" name="password" placeholder="비번입력" ></p>
<input type="file" name="file" value="file"><br>
<input type="checkbox" name="checkbox" value="checkbox"><br>
<input type="radio" name="radio" value="radio"><br>
<!--보이지 않는 입력 양식-->
<input type="hidden" name="hidden" value="hidden"><br>
<!--버튼-->
<input type="button" value="button"><br>
<input type="reset" value="reset"><br>
<input type="submit" value="submit"><br>
<input type="image" src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fi.pinimg.com%2F736x%2F89%2F46%2Ffc%2F8946fc985c33e607abaf7b3f1a905b18.jpg&type=sc960_832" height="300">
<input type="image" src="cat.png" alt="상대링크라 파일이 없어서 안뜨는거여" height="300">
</form>
</body>
</html>이름
비밀번호
>> 'get'형식이면 이렇게 작성한대로 주소에 저장됨.
<!DOCTYPE html>
<head>
<title>form_radio</title>
</head>
<body>
<form>
<table>
<tr>
<td><label for="username">이름</label></td>
<td><input id="username" type="text" name="username" ></td>
</tr>
<tr>
<td>성별</td>
<td>
<label for="man">남자</label>
<input id="man" type="radio" name="gender" value="m">
<label for="woman">여자</label>
<input id="woman" type="radio" name="gender" value="w">
<label for="child">어린이</label>
<input id="child" type="radio" name="gender" value="c">
</td>
</tr>
</table>
<input type="submit" value="가입">
</form>
</body>
</html>>> radio 버튼은 name 속성을 같게 입력해야 여러 항목 중 하나만 선택가능
ex. input ........~~~...... name="blabla" >> 요기부분
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fieldset&legend</title>
</head>
<body>
<form>
<fieldset>
<legend>입력양식</legend>
<table>
<tr>
<td><label for="name">이름:</label></td>
<td><input id="name" type="text"></td>
<td>성별:
<label for="man"> 남자</label>
<input id="man" type="radio" name="gender" value="m">
<label for="woman">, 여자</label>
<input id="woman" type="radio" name="gender" value="w">
<label for="others">, 제3의성</label>
<input id="others" type="radio" name="gender" value="o">
</td>
</tr>
<tr>
<td><label for="mail">주소:</label></td>
<td><input id="mail" type="email"></td>
</tr>
<tr>
<td><label for="mail">이메일:</label></td>
<td><input id="mail" type="email">
<label for="mail"> 이메일1:</label></td>
<td><input id="mail" type="email"></td>
</tr>
</table><br>
<input type="submit">
</fieldset>
</form>
</body>
</html>