form表单的制作

最新推荐文章于 2022-10-24 15:28:16 发布

qq_32468225

最新推荐文章于 2022-10-24 15:28:16 发布

阅读量1.7k

点赞数

分类专栏：前端之javascript脚本语言

本文链接：https://blog.csdn.net/qq_32468225/article/details/53494185

版权

前端之javascript脚本语言专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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));