자기개발/빅데이터_R과 파이썬

Html의 Form , 폼 양식

안박 2022. 11. 3. 20:19

 

폼 양식을 활용하여 회원가입 페이지만들기

 

1. 일단 사용태그와 속성을 기억할 수가 없는 자들을 위한 ...

https://www.w3schools.com/html/html_forms.asp

 

HTML Forms

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

정말 친절하게도 하나씩 들어가면 됩...

 

2. 그래서 열심히 입력한 소스들

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
 <style>
 table, tr, td {
 border: solid 1px blue;
 border collapse: collapse;
 padding: 8px;
 text-align: center
 }
  </style>
  <form>
  <table>
  <tr>
    <td><strong>계정상세</strong><br>
<br>사용자명(필수)<br>
<input type="text">
    <br>
이메일주소(필수)<br>
<input type="text">
<br>비밀번호 선택(필수)<br>
<input type="password">
<br>비밀번호 확인(필수)<br>
<input type="password"><br>
</td>
<td><strong>프로필상세</strong><br>
<br>이름(필수)<br><input type="text">
<br>영어이름(필수)<br><input type="text">
<br>성별(필수)<br>
<input type="radio" id="여자" name="성별" value="여자">
    <label for="여자">여자</label><br>
    <input type="radio" id="남자" name="성별" value="남자">
    <label for="남자">남자</label><br>
    <br>생년월일(필수)<br><input type="date" value="년" min="1920" max="2022">   
</td>
<td>사용자명<br><input type="text">
<br>비밀번호<br><input type="text">
<br><input type="checkbox">기억하기<br>
<br><button onclick="myFunction()">로그인</button>  
<script>function myFunction() {alert("Nice");}
</script>회원가입
</td>
  </tr>
  </table>
  </form>
 </body>
</html>

* 생년월일 입력을 위해 input type = "date"  활용

* 로그인 버튼을 누르면 깜짝 메시지를 띄우기 위해 alert 활용