css表单的实现方法

首先，在html中，表单以<form>标记开头，

form标签：装表单的内容。

input标签：也就是输入框，它的属性最常见的placeholder代表输入框中提示文字。为了区分不同的输入框，其属性type="sign";可以自定义，在css引用过程中在inpu后面标注[input="sign"],类似这样即可。  

 

 

label标签：其次就是对输入框的说明，即对input标签的标注。

 

 

select标签：与input输入框类似，不同的是，它是选择的框，其子元素select提供可选择的内容。其属性id可以区分不同的select表单。

option标签：属性value代表选项值，可以区分不同的option

 

 

textarea标签：可输入的文本框，其属性cols,rows分别代表最多可输入的列和行，行在输入超过限制后，右边会出现拉动条。仍然可以继续输入。 

 

 

 提交：可以用input标签，也可以用button标签

 

 

 完整代码：

 <div class="right4-right">
                        <p class="right4-p2">联系我们</p>
                        <form action="">
                            <label for="name">姓名</label>
                            <input type="text1" placeholder ="您的称呼..." style="width: 90%;">
                            <label for="phone">联系电话</label>
                            <input type="text1" placeholder="联系电话..." style="width: 90%;">
                            <label for="country">地区</label>
                            <select name="country" id="country" >
                                <option value="text1">中国大陆</option>
                                <option value="text2" selected="selected">中国香港</option>
                                <option value="">中国台湾</option>
                            </select>
                           <label for="subject" >留言</label>
                           <textarea style="width:90%" name="" id="" cols="30" rows="10" placeholder="写入一些信息..." style="width: 93%;"></textarea>
                           <input type="submit" value="提交" style="width: 100%;">
                        </form>
                    </div>

input[type=text1],select,textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    margin-bottom: 10px;
}
input[type=submit]{
    background-color: rgb(253, 165, 165);
    color: rgb(156, 100, 32);
    padding: 12px 20px;
    border: none;
    cursor: pointer;
}
.input[type=submit]:hover{
    background-color: rgb(253, 123, 123);
}
label{
    color: rgb(145, 96, 34);
    font-size: 19px;
}
form{
    margin-top: -19px;
}
#country{
    width: 95%;
}
option[value=text1]{
    background-color: red;
}
option[value=text2]{
    background-color: blue;
}