跳转至

表单标签

表单标签 2020年5月23日 9:44

表单标签

一、表单域

1、作用：

用于收集用户信息

2、组成

表单域、表单控件（表单元素）、提示信息，包含表单元素的区域，收集信息，把信息送给后台

3、格式

\<form action=”url地址” method=”提交方式” name=”表单域名称”> 各种表单元素控件 | \<formaction="demo.php"method="POST"name="name1">\</form> | |-----------------------------------------------------------------|

常用属性： | 属性 | 属性值 | 作用 | |--------|----------|----------------------------------------------------| | action | url地址 | 用于指定接收并处理表单数据的服务器程的url地址。 | | method | get/post | 用于设置表单数据的提交方式，具取值为get或post. | | name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |

二、表单控件（表单元素）

1、input输入表单元素

\<input type=”属性值”/> \<input/>为单标签 Type属性设置不同的属性值用来指定不同类型的控件 image1

image2 name 、value是每个表单元素都有的属性值，主要给后台人员使用 name表示属于同一块 value是在页面显示的名字 设置radio后还是多选，要在每一项加上”name=”xx” ”才可以实现多选 单选和多选最好都要加上name，且name一样 案例 image3

image4

label标签

对准标签内文本，就会自动选择，增加用户体验

<label for=”sex”>男</label>

<input type=”radio” name=”sex” id=”sex”/>

核心：\<label>标签的for属性应当与相关元素id属性相同 image5

2、Select下拉表单元素

<select>

<option>选项1</option>

<option>选项2</option>

</select>

在\<option>中定义select=”selected”时，当前项为默认选中项 image6

<body>

籍贯

<select>

<option>山东</option>

<option>北京</option>

<option>天津</option>

<option selected="selected">火星</option>

</select>

</body>

3、textarea文本域元素

书写大量文字eg.留言板 \<textarea>文本内容\</textarea> 可以加cols 和rows控制大小，但是实际开发不用，用CSS来改变

<form>
今日反馈:
<textarea cols="50" rows="5">pink老师,我知道这个反馈留言是textarea来做的 </textarea>
</form>

案例 image7

<body>

<h4>青春不常在，抓紧谈恋爱</h4>

<table width="600">

<tr>

<td>性别:</td>

<td>

<input type="radio" name="sex" id="man"><img src="images/man.jpg"> <label for="man">男</label>

<input type="radio" name="sex" id="woman"><img src="images/women.jpg"> <label for="woman">女</label>

</td>

<tr>

<td>生日：</td>

<td>

<select>

<option selected="selected">--请选择年份--</option>

<option>2000</option>

<option>2001</option>

<option>2001</option>

</select>

<select>

<option selected="selected">--请选择月份--</option>

<option>1</option>

<option>2</option>

<option>3</option>

</select>

<select>

<option selected="selected">--请选择日期--</option>

<option>4</option>

<option>5</option>

<option>6</option>

</select>

</td>

</td>

</tr>

<tr>

<td>所在地区</td>

<td><input type="text" value="上海"></td>

</tr>

<tr>

<td>婚姻状况</td>

<td>

<input type="radio" name="condition">未婚

<input type="radio" name="condition">已婚

<input type="radio" name="condition">离婚

</td>

</tr>

<tr>

<td>学历</td>

<td><input type="text" value="博士后"></td>

</tr>

<tr>

<td>喜欢的类型</td>

<td>

<input type="checkbox" name="like" checked="checked">妖艳的

<input type="checkbox" name="like">可爱的

<input type="checkbox" name="like">小鲜肉

<input type="checkbox" name="like">老腊肉

</td>

</tr>

<tr>

<td>个人介绍</td>

<td> <textarea> 个人简介</textarea></td>

</tr>

<tr>

<td></td>

<td><input type="submit" value="免费注册"></td>

</tr>

<tr>

<td></td>

<td>

<input><input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准 </input>

</td>

</tr>

<tr>

<td></td>

<td>

<a href="#"> 我是会员，立即登录</a>

</td>

</tr>

<tr>

<td>

</td>

<td>

<ul>

我承诺

<li>年满18岁、单身</li>

<li>抱着严肃的态度</li>

<li>真诚寻找另一半</li>

</ul>

</td>

</tr>

</table>

</body>