首先,在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;
}