[HTML]데이터 전달 <Form>과 그 안의 요소들(input, select...)

✨ UI/💗 HTML

[HTML]데이터 전달 <Form>과 그 안의 요소들(input, select...)

뉴이 NUEY 2024. 12. 22. 20:26

<form>
: server단으로 넘기는 정보를 모아 놓는 태그.

<form action="./form1_res.html" method="get">
- ⭐ action = "데이터를 전달할 링크"
  - submit 버튼을 클릭하면 실행됩니다.
- method = "get 또는 post"
  - get
    - 데이터가 보여지면서 전달된다.
    - 보안이 덜 중요한 경우 사용.
    - example) 검색 쿼리, 필터링된 리스트, 페이지 네비게이션
      radio=n 이런식으로 데이터가 전달되는 게 보입니다.
  - post
    - 데이터가 숨겨져서 전달.
    - 보안이 중요한 경우 사용.
    - example) 사용자 인증, 데이터 입력/저장, 파일 업로드.
<legend> : 창제목.
<input type="radio" name="radio" value="y">
- type : 타입에 따라 모양이 바뀝니다.
  - checkbox : 여러개 선택 가능.
  - radio : name이 같을 경우, 하나만 선택 가능하다.
  - reset : 입력값을 모두 지워준다.
  - button : 클릭 버튼.
  - ⭐ submit : 클릭 시 action의 경로로 데이터를 전달해줍니다.
  - hidden : 화면에서 보이지 않습니다. 숨겨진 데이터.
  - file : 파일 전달.
- name = "선택자명"
  - <form>에서는 id가 아닌 name 선택자를 사용합니다.
- value = "값"
  - 실제 전달되는 데이터입니다.

전체코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>form1</title>
</head>
<body>
    <form action="./form1_res.html" method="get">
        <fieldset>
                <legend>회원가입</legend>
                
                <p>아이디 : <input type="text" name="id" /></p>
                <p>비밀번호 : <input type="password" name="pw" /></p>
                <p>이메일 수신여부<br/>
                    <input type="radio" name="radio" value="y" />Ye
                    <input type="radio" name="radio" value="n" /> No
                    <!-- radio button은 1개만 선택가능! -->	
                </p>	
                <p>관심분야<br/>
                    <input type="checkbox" name="cb1" value="html" />HTML<br/>
                    <input type="checkbox" name="cb2" value="css" />CSS<br/>
                    <input type="checkbox" name="cb3" value="js" />JavaScript<br/>
                    <input type="checkbox" name="cb4" value="jq" />JQuery<br/>
                </p>
                <p>
                    <input type="reset" value="취소" />
                    <input type="button" value="그냥 버튼" />
                    <input type="submit" value="전송" />
                </p>
                <p>
                    <input type="file" />
                    <input type="hidden" name="hd" value="my hidden value" />
                </p>
        </fieldset>
    </form>
</body>
</html>

<label>
<textarea>
<select>

<label for="연결할 태그name명"> : 폼요소에 이름표를 달아줍니다.
<textrarea> : 텍스트입력 박스입니다.
<select> : 셀렉트박스를 만들어줍니다.
- <option value="실제값"> : 박스의 선택란들입니다.

전체코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>폼 만들기2</title>
</head>

<body>
    <p>
		<label for="reply">답글</label><br/>
		<textarea rows="3" cols="30" id="reply" name="reply"></textarea>
        <input type="submit" value="입력" />
    </p>
    <p>
		<label for="reply">과목선택</label><br/>
		<select name="subject">
			<option value="html">HTML</option>
			<option value="css">CSS</option>
			<option value="js">JavaScript</option>
			<option value="jq">JQuery</option>
		</select>
    </p>

    <p>
		<label for="lunchMenu">점심메뉴 선택</label>
		<select name="lunchMenu">
			<optgroup label="한식">
				<option value="kimchi-zzigae">김치찌개</option>
				<option value="bulgogi">불고기</option>
				<option value="duenjang-zzigae">된장찌개</option>
				<option value="samketang">삼계탕</option>
			</optgroup>
			<optgroup label="분식">
				<option value="jjolmean">쫄면</option>
				<option value="dducbokki">떡볶이</option>
				<option value="sun-dae">순대</option>
			</optgroup>
		</select>
    </p>
</body>

</html>

저작자표시 비영리 변경금지

'✨ UI > 💗 HTML' 카테고리의 다른 글

[HTML]페이지 자동이동 location.href=' '; (0)	2025.01.01
[HTML]선택자 selector. id, class, name (0)	2024.12.22
[HTML]이미지 img (0)	2024.12.22
[HTML]테이블 만들기 & 셀 병합 (1)	2024.12.22
[HTML]목록태그 <ul> <ol> <dl> (0)	2024.12.21

현재글[HTML]데이터 전달 <Form>과 그 안의 요소들(input, select...)

분류 전체보기 (470)

🍃 Spring (29)

☕ JAVA (114)

🐍 Python (41)

✨ UI (33)

😼 Git (3)

☁ Network (10)

💬 프로그래밍 표현식 (2)

🕸 Algorithm (84)

📜 CleanCode (24)

🛠 도구 (53)

💾 Data Base (1)

[ERROR] (5)

📑 개발 사전 (35)

🏙 취직 & 업무 (5)

♥ Life (20)

❔ (1)

Nuey.log

[HTML]데이터 전달 <Form>과 그 안의 요소들(input, select...)

'✨ UI > 💗 HTML' 카테고리의 다른 글

'✨ UI/💗 HTML'의 다른글

티스토리툴바

[HTML]데이터 전달 <Form>과 그 안의 요소들(input, select...)

'✨ UI > 💗 HTML' 카테고리의 다른 글

'✨ UI/💗 HTML'의 다른글

관련글

티스토리툴바