Front-End-Web/html+css

제12강_HTML 입력-Form

jsBae 2022. 10. 8. 00:19

HTML FORM

  • HTML 양식은 사용자 입력을 수집하는 데 사용됩니다. 
  • 사용자 입력은 처리를 위해 가장 자주 서버로 전송됩니다.
<!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>

<form> 요소

  • HTML <form>요소는 사용자 입력을 위한 HTML 양식을 만드는 데 사용됩니다.
  • <form>요소는 텍스트 필드, 체크박스, 라디오 버튼, 제출 버튼 등과 같은 다양한 유형의 입력 요소를 위한 컨테이너입니다 .
<form>
.
form elements
.
</form>

<form action="입력 데이터를 처리할 페이지 주소" method="입력 데이터를 서버에 전달할 방식"></form>
  • action 속성 : 입력 데이터를 처리할 페이지 URL.
  • method 속성 : 입력 데이터를 서버에 전달할 방식을 명시한다.
    • GET 방식 : 주소에 데이터를 추가하여 서버에 전달하는 방식이며 중요도가 낮은 데이터를 전달할 때 주로 사용합니다 .
    • POST 방식 : 데이터를 별도로 첨부하여 전달하는 방식이며 보안성 및 활용성이 GET 방식보다 뛰어나다.

HTML input

  • HTML <input>요소는 가장 많이 사용되는 양식 요소입니다.
  • type요소는 속성 <input>에 따라 다양한 방식으로 표시될 수 있습니다 .

HTML 입력 유형

유형 설명
<input type="text"> 한 줄 텍스트 입력 필드를 표시합니다.
<input type="radio"> 라디오 버튼을 표시합니다(많은 선택 사항 중 하나를 선택하기 위해)
<input type="checkbox"> 확인란을 표시합니다(많은 선택 항목 중 0개 이상 선택)
<input type="submit"> 제출 버튼 표시(양식 제출용)
<input type="button"> 클릭 가능한 버튼을 표시합니다.

<input type="text">

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>
  • type 속성 : 타입을 지정해주는 속성이며 해당 예시에서는 text로 타입을 지정해주었다.
  • name 속성 : 이름을 지정해주는 속성이며, 데이터를 처리해야하는 페이지에서 사용한다. 이 속성은 무조건 써주는것이 좋다.
  • placeholder 속성 : 무엇을 입력해야 하는지 안내하는 문구를 넣고 싶을 때 사용합니다. 화면 상에는 그 문자열이 보이지만, 버튼을 클릭후 아무것도 보이지 않습니다.
<form action="#" method="#">
아이디를 입력해주세요:<br>    
<input type="text" name="id" placeholder="아이디를 입력하세요">
</form>

<input type="password">비밀번호 필드 를 정의

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>

<input type="submit">양식 처리기

  • 양식 처리기는 일반적으로 입력 데이터를 처리하기 위한 스크립트가 있는 서버 페이지입니다.
  • 양식 처리기는 양식의 action 속성에 지정됩니다.
<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>

<input type="reset"> 모든 양식 값을 기본값으로 재설정 하는 재설정 버튼 

<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">
  <input type="reset">
</form>

<input type="radio">라디오 버튼

  • 라디오 버튼을 사용하면 제한된 수의 선택 항목 중 하나만 선택할 수 있습니다.
  • checked 속성 : 초기에 화면을 열때 체크되어 표시된다.
  • name 속성 : 이름을 지정해주는 속성이며, 데이터를 처리해야하는 페이지에서 사용한다. 같은 radio type옵션들은 반드시 같은 name 속성을 가지고 있어야 합니다.
  • value 속성 : 값(value)을 명시한다.
<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

<input type="checkbox">확인란

  • checked 속성 : 초기에 화면을 열때 체크되어 표시된다.
  • name 속성 : 이름을 지정해주는 속성이며, 데이터를 처리해야하는 페이지에서 사용한다. 같은 checkbox type옵션들은 반드시 같은 name 속성을 가지고 있어야 합니다.
  • disabled 속성 : 해당 옵션을 선택할 수 없게 설정할 수도 있습니다.
<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

<input type="button">버튼

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

<form action="#" method="#">
<input type="button" name="btn" value="버튼">
</form>

날짜를 포함해야 하는 <input type="date">입력

  • 브라우저 지원에 따라 날짜 선택기가 입력 필드에 나타날 수 있습니다.
  • min및 max속성을 사용하여 날짜에 제한을 추가할 수도 있습니다 .
<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>

<input type="datetime-local">시간대 없이 날짜 및 시간 입력 필드

<form>
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

<input type="email">이메일 주소

  • 이메일 주소를 포함해야 하는 입력 필드에 사용됩니다 .
  • 브라우저 지원에 따라 제출 시 이메일 주소가 자동으로 검증될 수 있습니다
<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</form>

<input type="image"> 이미지를 제출 버튼

<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

<input type="file"> 파일 선택 필드

  • <input type="file"> 파일 선택 필드와 파일 업로드를 위한 "찾아보기" 버튼을 정의합니다 .
  • accept 속성 : 사용자가 파일을 업로드할 때 확장자 및 종류를 명시할 수 있다.
<form action="#" method="#">
업로드 할 파일을 입력해주세요:<br>   
<input type="file" name="upload" accept="video/*">
</form>

 

텍스트 박스 - textarea

  • 여러줄의 텍스트를 입력할 수 있는 textarea type이다.
  • rows, cols 속성 : textarea의 너비 및 높이를 조절할 수 있다.
<form action="#" method="#">
Memo:<br>   
 <textarea name="memo" rows="10" cols="30"></textarea>
</form>

Select - 선택입력

  • 드롭다운 리스트로, 하나의 옵션만을 선택할 수 있는 select type이다.
  • selected 속성 : 초기에 화면을 열때 선택되어 표시된다.
  • size 속성 : size 속성 숫자만큼 화면에 디스플레이 된다.
<form action="#" method="#">
<select name="subject">
<option value="C">C언어</option>
<option value="JAVA">JAVA</option>
<option value="HTML" selected>HTML</option>
<option value="CSS">CSS</option>
</select>
</form>

<form action="#" method="#">
<select name="subject" size="3">
<option value="C">C언어</option>
<option value="JAVA">JAVA</option>
<option value="HTML" selected>HTML</option>
<option value="CSS">CSS</option>
</select>
</form>

fieldset

  • <fieldset> 속성 : HTML 양식 속에서 그룹을 만들 수 있습니다.
  • <legend> 속성 : 범례라는 뜻으로, 그룹에 대한 설명을 제공합니다.
<form action="#" method="#">
<fieldset>
    <legend>회원가입</legend>
    아이디: <input type="text" name="id"><br><br>
    비밀번호:<input type="password" name="pwd">
</fieldset>
</form>

HTML input 속성들

속성 설명 예
value 초기값을 설정 <input type="text" name="contry" value="대한민국">
readonly readonly 속성은 사용자가 수정할 수 없고 읽을 수만 있습니다. disabled 속성과의 차이점은 값이 서버로 전송 <input type="text" name="contry" value="대한민국" readonly>
disabled disabled 속성은 사용자가 아무것도 할 수 없고 클릭조차 안됨 <input type="text" name="contry" value="대한민국" disabled>
maxlength 텍스트의 최대길이를 설정 <input type="text" name="name" maxlength="5">
size <input> Tag 의 크기를 설정 <input type="text" name="name" size="30"> 
<form action="#" method="#">
이름: <input type="text" name="name" maxlength="10" size="30"><br>
국적: <input type="text" name="contry" value="대한민국" readonly><br>
학교: <input type="text" name="school" value="동명대학교" disabled>
</form>

HTML5에 새롭게 추가된 input 속성

속성 설명 예
autocomplete <form> Tag 나 <input> Tag에 사용자가 입력한 데이터를 저장 <form action="#" method="#" autocomplete="on">
autofocus 자동으로 커서를 위치 <input type="text" name="id" autofocus>
width & height <input> Tag의 타입이 이미지인 경우, width와 height의 속성으로 너비와 높이를 설정  
min & max 최솟값과 최댓값을 설정한다. number, range, date, time, datetime-local, month, week 타입만 가능하다 <input type="date" name="date" min="2000-01-01" max="2020-12-31">
multiple 데이터 갯수를 두개이상 허용
(email, file 타입에서만 사용가능합니다.)
 <input type="file" name="upload" multiple>
placeholder 무엇을 입력하여야 하는지 알려주는 문구 <input type="password" name="pwd" placeholder="비밀번호를 입력하십시오">
required
 반드시 입력 <input type="text" name="addr" placeholder="주소는 반드시 입력해야합니다." required>

연습

<h3>종합문제</h3>
<form>
  <fieldset>
    <legend>로그인 정보</legend>
    <ul>
      <li>
        <label for="user-id">아이디 </label>
        <input type="text" id="user-id">
      </li>
      <li>
        <label for="pwd1">비밀번호 </label>
        <input type="password" id="pwd1">
      </li>
      <li>
        <label for="pwd2">비밀번호 확인 </label>
        <input type="password" id="pwd2">
      </li>
    </ul>
  </fieldset>
    <fieldset>
    <legend>개인 정보</legend>
    <ul>
      <li>
        <label for="user-name">이름 </label>
        <input type="text" id="user-name">
      </li>
      <li>
        <label for="mail">메일 주소</label>
        <input type="email" id="mail">
      </li>
      <li>
        <label for="phone">연락처</label>
        <input type="tel" id="phone">
      </li>
      <li>
        <label for="homep">블로그/홈페이지</label>
        <input type="url" id="homep">
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>신청 과목</legend>
    <p>이 달에 신청할 과목을 선택하세요 (1과목만 가능)</p>
    <label><input type="radio" name="subject" value="speaking">회화</label>
    <label><input type="radio" name="subject" value="grammar">문법</label>
    <label><input type="radio" name="subject" value="writing">작문</label>       
  </fieldset>
  <fieldset>
    <legend>메일링</legend>
    <p>메일로 받고 싶은 뉴스 주제를 선택해 주세요 (복수 선택 가능)</p>
    <label><input type="checkbox" name="mailing1" value="news">해외 단신</label>
    <label><input type="checkbox" name="mailing2" value="dialog">5분 회화    </label>
    <label><input type="checkbox" name="mailing3" value="pops">모닝팝스</label>
  </fieldset>

  <input type="submit" value="가입하기">
</form>

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<h1>설문조사</h1>
<form>
이름: <input type="text" name="member" placeholder="이름을 반드시 입력해주세요" required><br><br>
주소: <input type="text" name="addr" value="대구 달서구..." readonly><br><br>
회사: <input type="text" name="company" value="nufyn 회사" disabled><br><br>
성별: <input type="radio" name="gender" value="man">남 <input type="radio" name="gender" value="woman">여<br><br>
전화번호 앞자리: <input type="radio" name="number" value="other">기타 <input type="radio" name="number" value="original">010<br><br>
좋아하는 애완 동물은? <input type="checkBox" name="dog" value="dog">개
                    <input type="checkBox" name="cat" value="cat">고양이
                    <input type="checkBox" name="snake" value="snake">뱀
                    <input type="checkBox" name="ant" value="ant">개미 <br><br>
ID: &nbsp;<input type="text" name="id" placeholder="아이디"><br><br>
PW: <input type="passWord"  name="pw" placeholder="패스워드"><br><br>

<select name="phone" size=3>
<option value="010">010</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="018">018</option>
<option value="019">019</option>

</select><br><br>
<textarea cols=40 rows=20 placeholder="Memo"></textarea><br><br>
<input type="submit" value="보내기">


</form>

</body>
</html>

<h2>종합문제</h2>
<form>
  <fieldset>
  <legend>로그인 정보</legend>
    <ul>
      <li>아이디 <input type="text" name="id" required></li>
      <li>비밀번호 <input type="password" name="pwd" required></li>
    </ul>
  </fieldset>
<fieldset>
  <legend>개인정보</legend>
    <ul>
      <li>이름 <input type="text" name="name" required></li>
      <li>메일주소 <input type="email" name="mail" required></li>
      <li>연락처 <input type="tel" name="tel" required></li>
      <li>홈페이지 <input type="url" name="url" ></li>
    </ul>
</fieldset>
<fieldset>
  <legend>신청과목</legend>
    <p>이달의 신청과목 1개 선책</p>
    <input type="radio" name="subject" value="sub01">회화
    <input type="radio" name="subject" value="sub02">문법
    <input type="radio" name="subject" value="sub03">작문

</fieldset>
<fieldset>
  <legend>메일링</legend>
    <p>메일 뉴스</p>
<input type="checkbox" name="news1" value="theme1">해외 단신
<input type="checkbox" name="news2" value="theme2">회화
<input type="checkbox" name="news3" value="theme3">팝스
<input type="checkbox" name="news4" value="theme4">스포츠
</fieldset>
<hr>
<input type="submit" name="submit" value="submit"> <input type="reset" name="reset" value="취소"> 
</form>
</body>
</html>
728x90
반응형
저작자표시 비영리 동일조건 (새창열림)