Today's content:
HTML tags: form tag
CSS: page layout control and landscaping
HTML tags: form tag
Form: * Concept: collecting data for a user input. And for server interaction. *
Form: used to define the form. Can define a range of user data acquisition range represents a range
* Properties:
* Action: submitting data specified the URL
* Method: Specifies submission
* Classification: a total of 7, two kinds of commonly used
* GET:
1. Request parameter address bar display. It encapsulates the request line (after explaining the HTTP protocol).
2. Request parameter size is limited.
3. less secure.
POST *:
2. Request parameter will no longer address bar. It will be encapsulated in the request body (after explaining the HTTP protocol)
. Size request parameter is not limited.
3. safer.Table datas in order to be submitted: You must specify the name attribute
* form item labels: * input: type attribute can change the style of display elements
* property type:
* text: text entry box, the default value
* placeholder: message specifying the input box, input box when the content changes, the automatically clears the message
* password: password input box
* radio: radio button
* Note:
1. to get more radio buttons to achieve the effect of radio , the plurality of box name attribute value must be the same.
2. General will give every single box provides value attribute specifies the value that was selected after submission
3. checked attribute, you can specify a default value
* checkbox: check boxes
* Note:
1. General will give every single box provide value attribute specifies the value that was selected after submission
2. checked attribute, you can specify a default value
* file: file selection box
* hidden: hide the field for some of the information submitted.
* Button:
* the Submit: Submit button. Can submit the form
* button: Normal button
Picture submit button: * image
path * src attribute specifies the image
* label: text description of the specified entry information
* Note:
* Label for attribute and generally corresponding to the id attribute value input. If the correspondence, then click on the label area, will get input focus input box. * Select: drop-down list
* child elements: option, the specified list item
* textarea: a text field
* cols: Specifies the number of columns, each line how many characters
* rows: default number of rows.
CSS: page layout control and landscaping
The concept: Cascading Style Sheets Cascading Style Sheet * stack: multiple styles may act on the same html element, as well as the entry into force
Benefits:
. Powerful
content presentation and style control separate * reduce the coupling. Decoupling * * make it easier for the division of labor to improve development efficiencyUse of CSS: CSS and html binding mode
- Inline style
style attribute css code in the tag specified
as: <div style = "color: red;"> hello css </ div>- * In the internal style head tag, the tag body content definition style tags, style tags is css code such as *:
<style>
div {
Color: Blue;
}
</ style>
<div> Hello css </ div>- External style
definitions css resource file.
In the head tag, the definition of the link tag, the introduction of external resource files
such as:
a.css file:
div {
Color: Green;
}
<link the rel = "this stylesheet" the href = "CSS / a.css">
<div> Hello CSS </ div>
<div> Hello CSS </ div>Note: * 1,2,3 ways css effect of increasing the scope
* 1 mode is not used, the latter commonly used formats 2, 3 * 3 can be written as:
<style>
@import "css / a.css";
< / style>css Syntax: * format: {selector
attribute names 1: 1 attribute value;
property name 2: attribute value 2;
...} * selector: Filter elements having similar characteristics * Note: * for each property required; spaced , the last attribute can not be added;Selector: Filter elements having similar characteristics * Classification:
1. Basic selector
1. The selector id: selecting a specific element of id attribute value unique id values recommended a html page.
* Syntax: #id attribute values {}
2. the element selection: select an element with the same label name
* syntax: tag name {}
* Note: id selector element is higher than the priority selector
3. the selector class: class elements selected have the same attribute value.
* Grammar: .class attribute values {}
* Note: Select class selector priority over the element of choice
2. Extended Selector:
1. Select all elements:
* Syntax: * {}
2. Set selector and:
* a selector to select {2}
3. child selectors: the filter element selector selector element 12
* syntax: selector selector 1} {2
4. parent selector: filter selector parent element 2 selector 1
* syntax: selector 1> {2} selector
5. selector attribute: element name selection element, attribute name = attribute value
* syntax: element name [attribute name = "attribute value"] {}
6. pseudo-class selection: select some elements having status
* syntax: elements: {status}
* such as: <a>
* status:
* Link: initialization state
* visited: visited state
* Active: the state of being accessed
* hover: Mouse suspensionAttributes
- Fonts, text * font-size: font size * color: Text Color * text-align: their way * line-height: Row Height
- Background * background:
- Border * border: set the border, in line with property
- Size * width: Width * height: Height
- Box model: control layout * margin: Margin * padding: padding
* default margins affect the entire size of the box inside the case
* box-sizing: border-box ; box set of properties, so that the width and height is the ultimate box the size of the
float: float
left
right
Case:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("img/register_bg.png") no-repeat center;
padding-top: 25px;
}
.rg_layout{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*让div水平居中*/
margin: auto;
}
.rg_left{
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left > p:first-child{
color:#FFD026;
font-size: 20px;
}
.rg_left > p:last-child{
color:#A6A6A6;
font-size: 20px;
}
.rg_center{
float: left;
/* border: 1px solid red;*/
}
.rg_right{
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right > p:first-child{
font-size: 15px;
}
.rg_right p a {
color:pink;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px ;
}
#username,#password,#email,#name,#tel,#birthday,#checkcode{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6 ;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode{
width: 110px;
}
#img_check{
height: 32px;
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026 ;
}
</style>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<!--定义表单 form-->
<form action="#" method="post">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
</tr>
<tr>
<td class="td_left"><label for="checkcode" >验证码</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
<img id="img_check" src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号?<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>
