form_1

ToOak · Aug 23, 2016 · 55134fd · 55134fd
1 parent 206e609
commit 55134fd
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 0 deletions.
diff --git a/css/fourth_form.css b/css/fourth_form.css
@@ -0,0 +1,41 @@
+.textInput{
+    background-color: #cccccc;
+    border-width: 2px;
+    border-style: solid;
+    border-top-color: #324d84;
+    border-left-color: #5179b6;
+    border-bottom-color: #ddb0ed;
+    border-right-color: #c77cdc;
+}
+#name,#password{
+    background-image: url("../img/input_name.png");
+    background-repeat: no-repeat;
+    border: none;
+    width: 345px;
+    height: 45px;
+    line-height: 40px;
+    font-size: 18px;
+    text-indent: 80px;
+    padding-right: 10px;
+    padding-left: 10px;
+}
+select option{
+    background-color: #dae5f5;
+}
+select .l1{
+    background-color: #fff;
+}
+select .l2{
+    background-color: #435269;
+    color: white;
+}
+#b1{
+    width: 100px;
+    height: 25px;
+    font-size: 12px;
+    font-weight: bold;
+    border: 1px solid #333333;
+    background:  url("../img/bg_positon.jpg") no-repeat 0px -15px;
+    line-height: 24px;
+    text-indent: 32px;
+}
diff --git a/fourth_form.xhtml b/fourth_form.xhtml
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html
+        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <link href="css/fourth_form.css" rel="stylesheet" rev="stylesheet" type="text/css"/>
+    <title>CSS网站元素设计_FORM</title>
+</head>
+<body>
+    <form action="" name="forml" id="forml" method="post">
+        <input type="text" name="name" id="name"/>
+        <br/>
+        <br/>
+        <input type="text" name="password" id="password"/>
+        <br/>
+        <br/>
+        您是否曾使用表格式布局？
+        是<input name="c1" type="radio" value="yes"/>
+        否<input name="c1" type="radio" value="no"/>
+        <br/>
+        <br/>
+        您是否开始使用CSS布局？
+        是<input name="c2" type="radio" value="yes"/>
+        否<input name="c2" type="radio" value="no"/>
+        <br/>
+        <br/>
+        是否订阅CSS邮件？
+        <input name="submail" type="checkbox" value="sub"/>
+        是的
+        <br/>
+        <br/>
+        <input type="submit" name="rss" value="RSS订阅" id="b1"/>
+        <br/>
+        <br/>
+        您所从事的行业：
+        <select name="job">
+            <option class="l1">-请选择您所从事的行业-</option>
+            <option class="l2">-IT行业-</option>
+            <option>设计师</option>
+            <option>程序员</option>
+            <option>总  监</option>
+            <option class="l2">-传统行业-</option>
+            <option>美术编辑</option>
+            <option>项目经理</option>
+        </select>
+        <br/>
+        <br/>
+        请留下您的姓名：
+        <input type="text" name="name" class="textInput"/>
+        <br/>
+        <br/>
+        请留下您的Email地址：
+        <input type="text" name="email" class="textInput"/>
+        <br/>
+        <br/>
+        请留下您的建议：
+        <textarea rows="0" cols="0" name="comment"></textarea>
+        <br/>
+        <br/>
+        <input type="submit" name="submit" value="提交"/>
+    </form>
+</body>
+</html>
diff --git a/img/input_name.png b/img/input_name.png