表格不能正常工作

Question

问题：  1.为什么＆＃34;要求＆＃34;功能不在我的联系表格中？  2.为什么我不能使用输入字段的整个宽度。见img。  我只能写入输入字段的左半部分。

HTML：

<div id="content">
    <div class="contact">
        <fieldset class="name group">
            <label for="name" class="name">Name</label>
            <input id="name" name="name" required pattern="[A-Za-z-0-9]+\s[A-Za-z]+"  title="firstname lastname"/>
        </fieldset>
        <fieldset class="email group">
            <label for="email" class="email">Email</label>
            <input type="email" id="email" name="email" required title="Submit a valid Email">
        </fieldset>
        <fieldset class="phone group">
            <label for="phone" class="phone">Telephone</label>
            <input type="tel" id="phone" name="phone" pattern="(\+?\d[- .]*){7,17}" required title="Submit an international, national or local phone number"/>
        </fieldset>
        <fieldset class="message group">
            <label class="message">Message</label>
            <input type="text" id="message" required/>
        </fieldset>
        <fieldset class="send group">
            <input type="submit" value="Send" class="sendButton">
        </fieldset>
    </div>
</div> 

CSS：

#content
{
 max-width: 50.694%;
 position: absolute;
 bottom: 0;
 background: none repeat scroll 0 0 rgba(0, 0, 0, .55);
 border-radius: 13px;
 width: 730px;
 margin: 0 0 6.6% 25.9167%;
 box-shadow: 0 0 0 2px #000000, 2px 2px 30px 1px rgba(199, 255, 100, 0.73);
 }

 .contact{
 width: 100%;
 margin: 10px;
 }

 fieldset{
 border: 0;
 margin: 0;
 width: 100%;
 padding: 1%;
 } 

.name, .email, .message{
padding-right: 29px;
}

label{
color: #d8d9de;
font-family:'apple_chancerychancery';
font-size: 1.2em;
padding-left: 10px;
}

input{
margin-right: 70px;
padding: 6px;
text-align: left;
border-radius: 10px;
background: none repeat scroll 0 0 rgba(255, 240, 260, 0.5);
}

#name, #email, #phone, #message{
padding-right: 50%;
float: right;  
color: #253c93;
text-decoration: none;
border: 1px dotted #29FF00;
font-family: 'Calibri', Arial, sans-serif;
font-size: 1em;
width: 23%; 
}

div#inner-editor{
padding: 30px;
}

#message{
padding-top: 10%;
}

.sendButton{
background: rgba(0, 0, 0, 0);
color: #d8d9de;
font-size: 1.2em;
font-family: 'apple_chancerychancery';
padding: 0.8% 4%;
border: none;
margin-left: 42%;
box-shadow: inset 2px 2px 9px rgba(199, 255, 100, 0.73), inset -2px -2px 9px rgba(199,            
255, 100, 0.73);
}



::-webkit-input-placeholder { /* WebKit browsers */
color:    #d8d9de;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:    #d8d9de;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:    #d8d9de;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color:    #d8d9de;
}

Answer 1

以下是您的第二个问题已解决的fiddle。

刚刚从名称，电子邮件，电话和邮件ID输入字段中删除padding-right，并提高了width百分比。

Answer 2

您缺少表单标记。在我添加表单标记后，它适用于我：

   <div id="content">
            <div class="contact">
                <form>
                <fieldset class="name group">
                    <label for="name" class="name">Name</label>
                    <input id="name" name="name" required pattern="[A-Za-z-0-9]+\s[A-Za-z]+"  title="firstname lastname"/>
                </fieldset>
                <fieldset class="email group">
                    <label for="email" class="email">Email</label>
                    <input type="email" id="email" name="email" required title="Submit a valid Email">
                </fieldset>
                <fieldset class="phone group">
                    <label for="phone" class="phone">Telephone</label>
                    <input type="tel" id="phone" name="phone" pattern="(\+?\d[- .]*){7,17}" required title="Submit an international, national or local phone number"/>
                </fieldset>
                <fieldset class="message group">
                    <label class="message">Message</label>
                    <input type="text" id="message" required/>
                </fieldset>
                <fieldset class="send group">
                    <input type="submit" value="Send" class="sendButton">
                </fieldset>
                    </form>
            </div>
        </div> 

http://jsfiddle.net/GEs34/