Home > Article > Web Front-end > How to use html and css to implement a simple example of registration form
How to use html and css to implement a simple example of registration form
- 黄舟Original
- 2017-07-24 10:24:372667browse
Effect overview:
Specific code implementation
<!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='width:90%'>
<legend>填写用户信息</legend>
<br/>
<p class='line'>
<p align="left" class='leftp'>请填写您的姓名：</p>
<p align="left" class='rightp'>
<input type="text" name="name" class="text" />
</p>
</p>
<p class='line'>
<p align="left" class='leftp'>请填写您的密码：</p>
<p align="left" class='rightp'>
<input type="password" name="password" class="text" />
</p>
</p>
<p class='line'>
<p align="left" class='leftp'>请再次输入密码：</p>
<p align="left" class='rightp'>
<input type="password" name="passwordConfirm" class="text" />
</p>
</p>
<p class='line'>
<p align="left" class='leftp'>请选择性别：</p>
<p align="left" class='rightp'>
<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='line'>
<p align="left" class='leftp'>请输入年龄：</p>
<p align="left" class='rightp'>
<input type="text" name="age" class="text">
</p>
</p>
<p class='line'>
<p align="left" class='leftp'>请输入生日：</p>
<p align="left" class='rightp'>
<input type="text" name="birthday" class="text">
<br/>格式："yyyy-mm-dd"
</p>
</p>
<p class='line'>
<p align="left" class='leftp'>请选择您的爱好</p>
<p align="left" class='rightp'>
<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='line'>
<p align="left" class='leftp'>请选择省市：</p>
<p align="left" class='rightp'>
<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='line'>
<p align="left" class='leftp'>自我描述：</p>
<p align="left" class='rightp'>
<textarea name="description" rows="4" style="width:300px; ">请填写其他资料... </textarea>
</p>
</p>
<br/>
<p class='line'>
<p align="left" class='leftp'></p>
<p align="left" class='rightp'>
<br/><input type="submit" name="btn" value=" 提交信息 " class="button"><br/>
</p>
</p>
</fieldset>
</p>
</form>
</body>
</html>Code analysis
Document type declaration
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This code is called the DOCTYPE statement. DOCTYPE is the abbreviation of document type and is used to indicate what version of XHTML or HTML you are using. This indicates that you are using the "HTML 4.01" version. Similar ones are:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This declares that this document uses the XHTML 1.0 version.
HTMLc9ccee2e6ea535a969eb3f532ad9fe89tag
c9ccee2e6ea535a969eb3f532ad9fe89 tag defines styles in the document.
If you need to reference a style sheet in the document, you should define an external style sheet and then use 2cdf5bf648cf2f33323966d7f58a7f3f to connect to the style sheet.
Tips: In HTML5, all elements do not support the style attribute. If you need to add a style to an element, please Use the scoped attribute in the style element.
Note: If the scoped attribute is not defined, the c9ccee2e6ea535a969eb3f532ad9fe89 element must be a child element of the head element, or a child element of the noscript element (which is a child element of the head element) .
93f0f5c25f18dab9d176bd4f6de5d30e
46d5fe1c7617e3914f214aaf043f4ccf
h1 {color: blue}
h2 {color: red}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
HTML391c7a272dfd833f6e89c2f060146754tag
HTML legend tag
If a There are too many form items on the page. We'd better display them in groups, just like using the p tag to separate paragraphs. You can use the fieldset and legend tags to separate the form. Content grouping.
fieldset tag--Group the form
##fieldset tags appear in pairs , starting with 2b5469ab79cf842344327415c3b3bb95
and ending witha3ae74428855f48d0438405a4619fe75 ##A form can have multiple - < ;fieldset>
, each pair of
## attribute:2b5469ab79cf842344327415c3b3bb95is a group, and the description of each group of content can use the legend tag to describe the - Common -- General attributes
The above is the detailed content of How to use html and css to implement a simple example of registration form. For more information, please follow other related articles on the PHP Chinese website!