html form 폼 기초 입문 사례 설명
웹 페이지 에 표를 추가 하 다
C1,개술
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<!-- 3 3 -->
<!-- table ，bgcolor width border cellspacing -->
<table bgcolor="pink" width="300px" border="1px" cellspacing="0">
<tr> <!-- tr -->
<td colspan="2">11</td> <!-- colspan -->
<td>13</td><!-- td -->
</tr>
<tr>
<td>21</td>
<td>22</td>
<td rowspan="2">23</td> <!-- colspan -->
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</table>
</body>
</html>
탭
라벨 은 표 안의 한 줄 을 나타 낸다.
4.567914.라벨 은 줄 의 열 을 나타 낸다.
테두리 설정
4.567914.셀 간격 설정
배경 색 설정
너비 설정
높이 설정
합병 열
합병 은행
양식
데 이 터 를 제출 하 는 데 사용 되 는 것 은 본질 적 으로 표 라벨 밖 에 form 으로 싸 는 것 이다.
C1,테스트
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<form>
<table border="1px" bgcolor="lightgrey" bordercolor="red" cellspacing="0">
<tr>
<td colspan="2">
<h1 align="center"> </h1>
</td>
</tr>
<tr>
<td> ：</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td> ：</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td> ：</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td> ：</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td> ：</td>
<td>
<input type="email" />
</td>
</tr>
<tr>
<td> ：</td>
<td>
<input type="radio" />
<input type="radio" />
</td>
</tr>
<tr>
<td> ：</td>
<td>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</td>
</tr>
<tr>
<td> ：</td>
<td>
<select>
<option> </option>
<option> </option>
<option> </option>
<option> </option>
</select>
</td>
</tr>
<tr>
<td> ：</td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td> ：</td>
<td>
<input type="text" />
<img src="a.png">
<input type="button" value=" " />
</td>
</tr>
<tr>
<td> ：</td>
<td>
<textarea> ~~</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value=" "/>
<input type="button" value=" "/>
</td>
</tr>
</table>
</form>
</body>
</html>
탭 은 폼 의 데 이 터 를 제출 하 는 데 사 용 됩 니 다.
탭
표 의 줄 을 표시 하 는 데 사용 되 는 라벨
4.567914.라벨 은 줄 의 열 을 나타 낸다.
탭 은 그림 삽입 을 표시 합 니 다.
table라벨 은 드 롭 다운 상 자 를 표시 하고 option 은 드 롭 다운 옵션 입 니 다.탭 은 텍스트 필드 입 니 다.
입력 상자
형식 은 일반 텍스트 입력 상자 입 니 다.
비밀번호 입력 상자
메 일의 입력 상자
업로드 파일
4.567914.체크 상자 입 니 다.
다 중 선택 상자
보통 버튼 입 니 다.
4.567914.제출 버튼 으로 button 보다 데이터 제출 기능 이 많 습 니 다.
4.567914.속성 은 요소 의 위치 center 를 가운데 로 설정 합 니 다.
테두리 색상 설정
C3,양식 제출 데이터
C1,제출 단 추 는 submit 형식 이 어야 합 니 다.그렇지 않 으 면 데 이 터 를 제출 하지 않 습 니 다.
C2,어떤 데 이 터 를 제출 해 야 하 는 지 웹 페이지 에 name 속성 을 설정 해 야 합 니 다.
C3,제출 한 데 이 터 는 모두 주소 표시 줄 에 표 시 됩 니 다.http://127.0.0.1:8848/cgb2105/html4.html?username=1314
username=1314,그 중에서 username 은 페이지 의 name 속성 값 이 고 1314 는 웹 페이지 에 입력 한 데이터 입 니 다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<!-- ，，，，，GET
http://127.0.0.1:8848/cgb2105/html4.html?username=1&pwd=2&repwd=2
GET ： ， ，
POST ： ，
-->
<form method="post" action="http://www.baidu.com">
<table border="1px" bgcolor="lightgrey" bordercolor="red" cellspacing="0">
<tr>
<td colspan="2">
<h1 align="center"> </h1>
</td>
</tr>
<tr>
<td> ：</td>
<td>
<input type="text" name="username"/>
</td>
</tr>
<tr>
<td> ：</td>
<td>
<input type="password" name="pwd"/>
</td>
</tr>
<tr>
<td> ：</td>
<td>
<input type="password" name="repwd" />
</td>
</tr>
<tr>
<td> ：</td>
<td>
<input type="text" name="nick"/>
</td>
</tr>
<tr>
<td> ：</td>
<td>
<input type="email" name="mail" />
</td>
</tr>
<tr>
<td> ：</td>
<td>
<!-- radio ， name ，
value ， on
-->
<input type="radio" name="sex" value="1"/>
<input type="radio" name="sex" value="0"/>
</td>
</tr>
<tr>
<td> ：</td>
<td>
<!-- name ， value on -->
<input type="checkbox" name="like" value="1"/>
<input type="checkbox" name="like" value="2"/>
<input type="checkbox" name="like" value="3"/>
</td>
</tr>
<tr>
<td> ：</td>
<td>
<!-- value ， ， -->
<select name="city">
<option value="1"> </option>
<option value="2"> </option>
<option value="3"> </option>
<option value="4"> </option>
</select>
</td>
</tr>
<tr>
<td> ：</td>
<td>
<input type="file" name="head"/>
</td>
</tr>
<tr>
<td> ：</td>
<td>
<input type="text" name="code" />
<img src="a.png">
<input type="button" value=" " />
</td>
</tr>
<tr>
<td> ：</td>
<td>
<textarea> ~~</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value=" "/>
<input type="button" value=" "/>
</td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> form </title>
</head>
<body>
<!-- get -->
<form>
<table>
<tr>
<td>
<h3> MIS</h3>
</td>
</tr>
<tr>
<td>
：
</td>
</tr>
<tr>
<td>
<input type="text" placeholder=" " name="user" />
</td>
</tr>
<tr>
<td>
：
</td>
</tr>
<tr>
<td>
<input type="number" placeholder=" " name="age" />
</td>
</tr>
<tr>
<td>
：( )
<input type="radio" name="sex" value="1"/>
<input type="radio" name="sex" value="0"/>
</td>
</tr>
<tr>
<td>
：( )
<input type="checkbox" name="like" value="1"/>
<input type="checkbox" name="like" value="2"/>
<input type="checkbox" name="like" value="3"/>
</td>
</tr>
<tr>
<td>
：( )
<select name="edu">
<option value="1"> </option>
<option value="2"> </option>
<option value="3"> </option>
<option value="4"> </option>
</select>
</td>
</tr>
<tr>
<td>
： <br/>
<input type="date" name="time"/>
</td>
</tr>
<tr>
<td>
<input type="submit" value=" " />
<input type="button" value=" " />
</td>
</tr>
</table>
</form>
</body>
</html>
-1,개술
홈 페이지 를 꾸 미 는 데 쓰 이 는 것 이 예 뻐 졌 다.레이 어드 스타일 시트 스타일 시트
문법
td{ text-align : center; } 선택 기{속성 명:속성 값;}
-3,입문 사례
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> css </title>
<!-- css 2： css， css -->
<style>
/* ： { : ; } */
/* div */
div{
color:green; /* */
background-color: #008000;/* */
}
</style>
</head>
<body>
<!-- css 1： css-->
<div style="color: red;"> div1</div>
<div style="background-color: aquamarine;" > div2</div>
<div style="color: red;"> div3</div>
<div> div4</div>
<div> div5</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> css </title>
<!-- style HTML css -->
<style>
/* 1. ： */
/* 1： div */
div{
background-color: #008000; /* */
color: black; /* */
font-size: 30px ; /* */
font-family: " " ; /* */
}
/* 2： input */
input{
background-color: pink; /* */
}
/* 2. class ： class + . class */
.a{ /* class=a ， class */
color: yellow;/* */
}
/* 3. id ： id + # id */
#x{ /* id=x ， id ， */
font-size: 100px; /* */
}
</style>
</head>
<body>
<!-- div span p input -->
<div class="a"> div1</div>
<div id="x"> div2</div>
<div id="y"> div3</div>
<span class="a"> span1</span>
<span> span2</span>
<p class="a"> p</p>
<input type="text" placeholder=" input1"></input>
<input type="text" placeholder=" input2"></input>
</body>
</html>
이 글 은 여기까지 입 니 다.당신 에 게 도움 을 줄 수 있 기 를 바 랍 니 다.또한 당신 이 우리 의 더 많은 내용 에 관심 을 가 져 주 실 수 있 기 를 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다른 사람의 웹사이트 편집: contenteditable 및 designMode그래도 우리가 그렇게 할 수 있다고 생각하는 것은 멋진 일입니다. 제가 강조하고 싶었던 일종의 관련 API가 실제로 몇 개 있기 때문에 오늘 그것을 가져왔습니다. contenteditable는 "true" 값이 할당...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
