반응형
<Form> 요소
HTML에서 <form>은 사용자 입력을 위한 양식을 제공한다.
<form> 요소는 텍스트 필드, 체크박스, 라디오 버튼, 제출 버튼등과 같은 다양한 유형의 입력 요소에 대한 컨테이너를 제공한다.
<input> 요소
HTML에서 <input> 요소는 'form' 요소를 만드는데 많이 사용되는 요소이다.
<input> 요소는 type 속성에 대하여 많은 방식으로 표현될 수 있다.
| Type | Description |
| <input type="text"> | 한 줄 텍스트 입력 필드를 표시한다. |
| <input type="radio"> | 라디오 버튼을 표시한다. |
| <input type="checkbox"> | 확인란을 표시한다. |
| <input type="submit"> | 제출 버튼을 표시한다. |
| <input type="button> | 클릭이 가능한 버튼을 표시한다. |
Text Fields
<input type="text">는 한줄 텍스트 입력 필드를 표시한다.
<!DOCTYPE html>
<html>
<body>
<h2>Text Input Field</h2>
<form>
<label form="ID">ID:</label><br>
<input type="text" id="ID" name="ID" value="username"><br>
<label form="PW">Password</label><br>
<input type="text" id="PW" name="Password" value="password"><br>
</form>
</body>
</html>위의 코드는 우리가 아는 로그인 창을 만드는 예시코드이다.
Radio Buttons
라디오 버튼의 경우 <input type="radio">태그를 사용한다.
라디오 버튼의 경우 선택 요소들 중 하나를 선택할 수 있다.
<!DOCTYPE html>
<html>
<body>
<h2>Radio Button</h2>
<p>어떠한 기업에 들어가고 싶으신가요?</p>
<form>
<input type="radio" id="삼성" name="company" value="삼성">
<label for="삼성">삼성</label><br>
<input type="radio" id="SK" name="company" value="SK">
<label for="SK">SK</label><br>
<input type="radio" id="LG" name="company" value="LG">
<label for="LG">LG</label><br>
</form>
</body>
</html>위의 예제코드를 실행시켜보면 라디오 버튼은 ○표시로 되어있는것을 알 수 있다.
Checkboxes
체크박스는 <input type="checkbox"> 를 사용한다.
체크박스는 옵션선택을 여러가지 할 수 있다.
<!DOCTYPE html>
<html>
<body>
<h2>Checkboxes</h2>
<p>어떠한 주식을 가지고 있나요?</p>
<form>
<input type="checkbox" id="삼성" name="company" value="삼성">
<label for="삼성">삼성</label><br>
<input type="checkbox" id="SK" name="company" value="SK">
<label for="SK">SK</label><br>
<input type="checkbox" id="LG" name="company" value="LG">
<label for="LG">LG</label><br>
</form>
</body>
</html>위의 예시코드로 내용을 확인할 수 있다.
제출 버튼
데이터를 제출하는데 <input type="submit">이라는 태그가 사용이 된다.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
</body>
</html>위의 예시는 아이디와 비번을 입력하고 제출을 누르면 php로 데이터가 넘어가는 코드이다.
위의 코드에서는 php코드를 작성하지 않아서 실제로는 넘어가지 않는다.
반응형
'웹프로그래밍 > HTML' 카테고리의 다른 글
| HTML Form 속성 (0) | 2023.09.07 |
|---|---|
| HTML 텍스트 포멧팅(TEXT Formattiong) <b>, <strong>, <i>, <em>, <mark>, <small>, <del>, <ins>, <sub>, <sup> 사용법 (0) | 2023.09.05 |
| HTML Iframes (0) | 2023.09.04 |
| HTML 클래스 class (0) | 2023.09.04 |
| HTML 리스트 - Unordered Lists (0) | 2023.09.04 |
댓글