form表单:
fieldset:表单分组元素(form元素的上面,第一个分组的上面)
legend:fieldset元素的标题,也是fieldset下的第一个元素
使用fieldset和legend对相关单选按钮进行分组,方便css样式的设置
1.创建文本框:
输入让访问者识别文本框的标签:如label标签
label标签多是描述表单字段的文本
label for规定label与哪个表单元素绑定,for后的值与绑定的表单元素的id值相同。
设置label for后会与表单标签有交互行为。
如点击标签后,文本字段将会自动获取焦点
span元素划分区域,实现特定效果
输入input type=”text” /实现自闭和
输入name=“dataname”,datename是让服务器识别输入数据的脚本
文本框输入字段中写入value=”default”,则这是这个文本框最初显示的字符串
文本框中输入字段写入 placeholder=”“,则这个值为输入文本框的初始数据,当input元素获得输入焦点时,此文本消失,让用户输入
value属性与placeholder属性不同:
value属性后的值在获取焦点后不会消失,且数据会被传递到服务器,而placeholder属性会在获取焦点后将清空输入框,且不会发送至服务器。
获取焦点和输入焦点是指光标在文本框内
文本框中输入字段写入 require=”required”,则当这个字段有值时才能提交表单
设置size=”n”,则控制文本框的字符宽度
在form表单中嵌套div和p,对提高表单的访问性和可读性至关重要
class=”rows”作为样式的钩子
表单元素中的name,id,for属性一样为非必要但却大多如此的存在。
(单选按钮和复选框除外因为对于他们一组input使用一个name值,而id值对于每一个input都是唯一的)
通常发送至服务器端的name值使用下划线分割多个单词
2.创建密码框:
输入input type=”password”
其余与 文本框格式相同
正真保护密码,请使用https://
3.创建电子邮件框,url框,搜索框,电话框
使用解释文本进行合法格式指导
邮件框 input type=”email”
搜索框input type=”search”
电话框input type=”tel”
url框 input type=”url”
select标签
option选择
input type=”file”
4.创建提交按钮
inputtype=”submmit”
创建图像提交按钮
input type=”image”
src=”image.url”
创建图像和文本提交按钮
input type=”image”
src=”image.url”
alt=”alternate text”
禁用表单元素disabled
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Creating a Form</title>
<link rel="stylesheet" href="css/form.css" />
</head>
<body>
<main class="wrapper" role="main">
<h1>Create a New Account</h1>
<form method="post" action="show-data.php" enctype="multipart/form-data">
<!-- START ACCOUNT FIELDS -->
<fieldset>
<h2 class="hdr-account">Account</h2>
<div class="fields">
<p class="row">
<label for="first-name">First Name<span class="required">*</span>:</label>
<input type="text" id="first-name" name="first_name" class="field-large" required="required" aria-required="true" />
</p>
<p class="row">
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="last_name" class="field-large" />
</p>
<p class="row">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="yourname@example.com" class="field-large" />
</p>
<p class="row">
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
</p>
<p class="row">
<label for="password2">Re-enter Password:</label>
<input type="password" id="password2" name="password2" />
</p>
</div>
</fieldset>
<!-- end account -->
<!-- START ADDRESS FIELDS -->
<fieldset>
<h2 class="hdr-address">Address</h2>
<div class="fields">
<div class="row">
<label for="street-address">Street Address:</label>
<input type="text" id="street-address" name="street_address" class="field-large" />
</div>
<div class="row">
<label for="city">City:</label>
<input type="text" id="city" name="city" class="field-large" />
</div>
<div class="row">
<label for="state">State:</label>
<select id="state" name="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
</select>
</div>
<div class="row">
<label for="zip-code">ZIP Code:</label>
<input type="text" id="zip-code" name="zip_code" class="field-small" />
</div>
</div>
</fieldset>
<!-- end address -->
<!-- START PUBLIC PROFILE FIELDS -->
<fieldset>
<h2 class="hdr-public-profile">Public Profile</h2>
<div class="fields">
<div class="row">
<label for="picture">Picture:</label>
<input type="file" id="picture" name="picture" />
<p class="instructions">Maximum size of 700k. JPG, GIF or PNG.</p>
</div>
<p class="row">
<label for="screen-name">Screen Name:</label>
<input type="text" id="screen-name" name="screen_name" class="field-medium" />
</p>
<div class="row">
<label for="website">Website URL:</label>
<input type="url" id="website" name="website" placeholder="http://www.example.com" class="field-large" />
<p class="instructions">Have a homepage or a blog? Put the address here, <br />beginning with <kbd>http://</kbd> or <kbd>https://</kbd>.</p>
</div>
<p class="row">
<label for="bio">Bio:</label>
<textarea id="bio" name="bio" cols="40" rows="5" class="field-large"></textarea>
</p>
<div class="row">
<fieldset class="radios">
<legend>Gender:</legend>
<p class="row">
<input type="radio" id="gender-male" name="gender" value="male" />
<label for="gender-male">Male</label>
</p>
<p class="row">
<input type="radio" id="gender-female" name="gender" value="female" />
<label for="gender-female">Female</label>
</p>
</fieldset>
</div>
</div>
</fieldset>
<!-- end public profile -->
<!-- START EMAILS FIELDS -->
<fieldset>
<h2 class="hdr-emails">Emails</h2>
<div class="fields checkboxes">
<div class="row">
<input type="checkbox" id="email-ok-msg-from-users" name="email_signup[]" value="user-emails" />
<label for="email-ok-msg-from-users">It is okay to email me with messages from other users.</label>
</div>
<div class="row">
<input type="checkbox" id="email-ok-occasional-updates" name="email_signup[]" value="occasional-updates" />
<label for="email-ok-occasional-updates">It is okay to email me with occasional promotions about our other products.</label>
</div>
</div>
</fieldset>
<!-- end emails -->
<input type="submit" value="Create Account" class="btn" />
</form>
</main>
</body>
</html>
css文件
body {
font-size: 100%;
font-family: arial, sans-serif;
padding-bottom: 1em;
}
.wrapper {
width: 600px;
}
h2 {
background-color: #dedede;
border-bottom: 1px solid #d4d4d4;
border-top: 1px solid #d4d4d4;
border-radius: 5px;
box-shadow: 3px 3px 3px #ccc;
color: #fff;
font-size: 1.1em;
margin: 12px;
padding: 0.3em 1em;
text-shadow: #9FBEB9 1px 1px 1px;
text-transform: uppercase;
}
.hdr-account { background-color: #0B5586; }
.hdr-address { background-color: #4494C9; }
.hdr-public-profile { background-color: #377D87; }
.hdr-emails { background-color: #717F88; }
fieldset {
background-color: #f1f1f1;
border: none;
border-radius: 2px;
margin-bottom: 12px;
overflow: hidden;
padding: 0 .625em; /* 10px/16px */
}
.fields {
background-color: #fff;
border: 1px solid #eaeaea;
margin: .75em;
padding: .75em;
}
.fields .row {
margin: 0.5em 0;
}
label {
cursor: pointer;
display: inline-block;
padding: 3px 6px;
text-align: right;
width: 150px;
vertical-align: top;
}
.required { /* the asterisk */
color: red;
display: none;
}
input,
select,
button {
font: inherit;
}
.field-small {
width: 75px;
}
.field-medium {
width: 150px;
}
.field-large {
width: 250px;
}
select {
padding-right: 1em;
}
textarea {
font: inherit;
padding: 2px;
}
.instructions {
font-size: .75em;
padding-left: 167px;
font-style: italic;
margin: .5em 0 1.2em;
}
.instructions kbd {
font-size: 1.23em;
font-style: normal;
}
.btn {
background-color: #da820a;
border: none;
border-radius: 4px;
box-shadow: 2px 2px 2px #333;
color: #fff;
margin: 12px 0 0 26px;
padding: 8px;
text-shadow: 1px 1px 0px #777;
}
.btn-reset {
background-color: #8e5303;
color: #eee;
margin-left: 35px;
}
/* :::: Radio Buttons :::: */
.radios {
background-color: transparent;
position: relative;
margin-bottom: 0;
}
.radios .row {
margin: 0 0 0 150px;
}
.radios legend {
left: 0;
padding: 0 6px;
position: absolute;
text-align: right;
top: 2px;
width: 148px;
*width: 143px; /* a hack for IE7 */
}
.radios label {
padding-left: 2px;
margin-right: 5px;
vertical-align: middle;
width: auto;
}
/* :::: Checkboxes :::: */
.checkboxes label {
text-align: left;
width: 475px;
}
button * {
vertical-align: middle;
}
javascript文件:
(function (window, document) {
'use strict';
// Locate the id="choices" div and the textarea below the Other radio button
// and assign them to variables so they can be acted upon
var choices = document.getElementById('choices'),
textarea = document.getElementById('other-description');
// Do nothing if the radio buttons and textarea don't exist in the HTML
if (!choices || !textarea) {
return;
}
// Add behavior to radio buttons
choices.onclick = function(e) {
var target,
e;
// Check for IE7 or prior
if (!e) {
e = window.event;
}
// Event target for modern browsers and IE7 or prior
target = e.target || e.srcElement;
// Toggle textarea based on radio button chosen
if (target.getAttribute('type') === 'radio') {
if (target.id !== 'other') {
textarea.disabled = true; // Disable the textarea
} else { // Visitor selected Other
textarea.disabled = false; // Enable the textarea
textarea.focus(); // Place cursor in the textarea
}
}
};
}(window, document));