一個關於表格的簡單網頁的編寫

時間 2019-11-24

標籤一個關於表格簡單網頁編寫欄目 HTML 简体版

原文原文鏈接

html部分css

<!DOCTYPE html>
<html>
    <head>
        <title>Web Form</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div id="header"><h1>Contact Us!</h1></div>
        <div id="wrapper">
            <div id="inputs">
                <form name="input" action="#" method="post">
                 First name: <input type="text" name="firstname" value="first name"><br/>
                 Last name: <input type="text" name="lastname" value="last name"><br/>
                 E-mail: <input type="email" name="email" value="e-mail address"><br/><br/>
                </form>
            </div>
            <div>
                <form id="options">
                    Message: <br/><textarea name="msg"></textarea><br/>
                    <p>Sex:</p>
                    <input type="radio" name="sex" value="male">Male
                    <input type="radio" name="sex" value="female">Female<br/><br/>
                    <input type="checkbox" name="notify" value="updates" checked>I'd like to receive notices when this website updates.<br/>
                    <input type="checkbox" name="notify" value="services">I'd like to receive notices pertaining to related websites and their services.<br/><br/> 
                    <input type="submit" value="Submit">
                </form>
            </div>
        </div>
    </body>
</html>

css部分html

#header {
    position: relative;
    top: -10px;
    background-color: #00A0B0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
height: 40px;
}
 
h1 {
    font-family: Lobster;
    color: #FFFFFF;
    text-align: center;
}
 
form {
    font-family: Verdana, Arial, sans-serif;
}
 
p {
    font-family: Verdana, Arial, sans-serif;
    display: inline-block;
}
 
input {
    font-family: Verdana, Arial, sans-serif;
    color: #777;
}
 
textarea {
vertical-align: top;
width: 400px;
color: #777;
}
 
#wrapper {
    border-left: 1px solid #888;
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    position: relative;
    top: -10px;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 20px;
    box-shadow: 3px 3px 3px #444;
    font-family: Verdana, Arial, sans-serif;
    font-size: 0.8em;
}
 
#inputs {
width: 200px;
clear: both;
}
 
#inputs input {
width: 100%;
clear: both;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。