집 > 기사 > 웹 프론트엔드 > html과 css를 사용하여 등록 양식의 간단한 예를 구현하는 방법

html과 css를 사용하여 등록 양식의 간단한 예를 구현하는 방법

黄舟원래의: 2017-07-24 10:24:372747검색

효과 개요:

특정 코드 구현

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>提交用户信息</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
body, p, td, input {font-size:12px; margin:0px; }
select {height:20px; width:300px; }
.title {font-size: 16px; padding: 10px; width:80%; }
.text {height:20px; width:300px; border:1px solid #AAAAAA; }
.line {margin:2px; }
.leftp {width:110px; float:left; height:22px; line-height:22px; font-weight:bold; }
.rightp {height:42px; }
.button {
color:#fff;
font-weight:bold;
font-size: 11px; 
text-align:center;
padding:.17em 0 .2em .17em;
border-style:solid;
border-width:1px;
border-color:#9cf #159 #159 #9cf;
background:#69c url(images/bg-btn-blue.gif) repeat-x;
}
</style>
</head>
<body>
<form action="/servlet/servlet/PostServlet" method="POST">
<p align="center">
<br/>
<fieldset style=&#39;width:90%&#39;>
<legend>填写用户信息</legend>
<br/>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请填写您的姓名：</p>
<p align="left" class=&#39;rightp&#39;>
<input type="text" name="name" class="text" />
</p>
</p>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请填写您的密码：</p>
<p align="left" class=&#39;rightp&#39;>
<input type="password" name="password" class="text" />
</p>
</p>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请再次输入密码：</p>
<p align="left" class=&#39;rightp&#39;>
<input type="password" name="passwordConfirm" class="text" />
</p>
</p>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请选择性别：</p>
<p align="left" class=&#39;rightp&#39;>
<input type="radio" name="sex" value="男" id="sexMale">
<label for="sexMale">男</label>
<input type="radio" name="sex" value="女" id="sexFemale">
<label for="sexFemale">女</label>
</p>
</p>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请输入年龄：</p>
<p align="left" class=&#39;rightp&#39;>
<input type="text" name="age" class="text">
</p>
</p>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请输入生日：</p>
<p align="left" class=&#39;rightp&#39;>
<input type="text" name="birthday" class="text"> 
<br/>格式："yyyy-mm-dd"
</p>
</p>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请选择您的爱好</p>
<p align="left" class=&#39;rightp&#39;>
<input type="checkbox" name="interesting" value="音乐影视" id="i1">
<label for="i1">音乐影视</label> 
<input type="checkbox" name="interesting" value="外出旅游" id="i2">
<label for="i2">外出旅游</label> 
<input type="checkbox" name="interesting" value="社交活动" id="i3">
<label for="i3">社交活动</label> 
</p>
</p>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>请选择省市：</p>
<p align="left" class=&#39;rightp&#39;>
<select name="area">
<option>---请选择省份---</option>
<optgroup label="北京市">
<option value="北京市海淀区">海淀区</option>
<option value="北京市朝阳区">朝阳区</option>
<option value="北京市东城区">东城区</option>
<option value="北京市西城区">西城区</option>
</optgroup>
<optgroup label="山东省">
<option value="山东省济南市">济南市</option>
<option value="山东省青岛市">青岛市</option>
<option value="山东省潍坊市">潍坊市</option>
</optgroup>
</select>
</p>
</p>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;>自我描述：</p>
<p align="left" class=&#39;rightp&#39;>
<textarea name="description" rows="4" style="width:300px; ">请填写其他资料... </textarea>
</p>
</p>
<br/>
<p class=&#39;line&#39;>
<p align="left" class=&#39;leftp&#39;></p>
<p align="left" class=&#39;rightp&#39;>
<br/><input type="submit" name="btn" value=" 提交信息 " class="button"><br/>
</p>
</p>
</fieldset>
</p>
</form>
</body>
</html>

코드 분석

문서 유형 선언

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

이 코드를 DOCTYPE 선언이라고 합니다. DOCTYPE은 문서 유형의 약어이며 사용 중인 XHTML 또는 HTML 버전을 나타내는 데 사용됩니다. 이는 "HTML 4.01" 버전을 사용하고 있음을 나타냅니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

여기서 이 문서는

HTMLc9ccee2e6ea535a969eb3f532ad9fe89 태그를 사용한다고 명시되어 있습니다. 스타일의 정의 문서.

문서에서 스타일 시트를 참조해야 하는 경우 외부 스타일 시트를 정의한 다음 2cdf5bf648cf2f33323966d7f58a7f3f를 사용하여 스타일 시트에 연결해야 합니다.

팁:

HTML5에서는 모든 요소가 style 속성을 지원하지 않습니다. 요소에 스타일을 추가해야 하는 경우 스타일 요소에서 범위 속성을 사용하세요.

참고:

범위 속성이 정의되지 않은 경우 c9ccee2e6ea535a969eb3f532ad9fe89 요소는 head 요소의 하위 요소이거나 noscript 요소(head 요소의 하위 요소)의 하위 요소여야 합니다.

93f0f5c25f18dab9d176bd4f6de5d30e
    46d5fe1c7617e3914f214aaf043f4ccf
    h1 {color: blue}
    h2 {color: red}
    531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1

HTML391c7a272dfd833f6e89c2f060146754 태그

p

fieldset 및 <code style="color:rgb(204,0,0); margin:0px 2px">legend

p标签分开段落一样,可以使用fieldset与legend标签对表单内容分组.

fieldset 标签 -- 对表单进行分组

fieldset标签是成对出现的,以2b5469ab79cf842344327415c3b3bb95开始,以a3ae74428855f48d0438405a4619fe75结束
一个表单可以有多个2b5469ab79cf842344327415c3b3bb95,每对2b5469ab79cf842344327415c3b3bb95
fieldset 태그는 2b5469ab79cf842344327415c3b3bb95는 a3ae74428855f48d0438405a4619fe75

2b5469ab79cf842344327415c3b3bb95

성명：본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：HTML의 테이블 및 양식 태그에 대한 자세한 설명다음 기사：HTML의 테이블 및 양식 태그에 대한 자세한 설명

`관련 기사`

더보기

HTML 지식 요약
HTML을 빨리 배우는 방법
html xhtml xml의 차이점
src와 href 속성의 차이점
HTML5 및 CSS 대체 사용 정보

집
강의
Q&A
나의
집
강의
기사
Q&A
사전
수동
다운로드
주제
집
기사
Q&A
강의
주제
다운로드
게임
사전
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）