标签的使用（四）：表单标签的使用汇总

来源：互联网发布：网络安全员日常工作编辑：程序博客网时间：2024/06/08 08:16

综述：网站如何与用户进行交互？答案是使用HTML表单。表单可以把用户输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

语法：<form method="传送方式" action="服务器文件">。讲解：action是浏览者输入的数据被传送到的地方，比如一个PHP页面（save.php）;method表示数据传送的方式（get/post）。看下面例子。效果如图。

<!DOCTYPE HTML><html>    <head>        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">        <title>表单标签的使用</title>    </head>    <body>        <h1>表单标签的使用</h1>    <form method="post" action="save.php">        <label for="username">用户名：</label>        <input type="text" name="username" id="username" value=""/>        <label for="pass">密码：</label>        <input type="password" name="pass" id="pass" value=""/>        <input type="submit" value="确定" name="submit"/>        <input type="reset" value="重置" name="reset"/>    </form>    </body></html>

这里写图片描述

需要注意的是，所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form></form>标签之间。什么叫post/get传送方式，这里属于后端的内容了，等过些时日，讲到后端的时候，自然会接触到。

1.文本输入框，密码输入框。
- 基本用法，如下：

<form>    <input type="text/password" name="名称，以备后台ASP、PHP调用" value="文本，默认提示值"></form>

2.文本域，输入一块内容。
-基本用法，如下：

<form method="post" action="save.php">        <label>联系我们</label>        <textarea cols="50" rows="10">在这里输入内容……</textarea></form>

cols:多行输入域的列数。rows：多行输入域的行数。
在<textarea></textarea>标签之间可以输入默认值。
行数和列数两个属性可用css样式的width和height来替代。后面会讲到。

3.单选框和复选框。
-基本语法，如下：

<input type="radio/checkbox" value="值" name="名称" checked="checked"/>

type,确定使用单选框还是复选框。
value，表示当选择这个选项时，给名为name的这组控件赋值，以便后台使用。
name，给控件命名，便于ASP、PHP等的使用。
checked：当设置checked=”checked”时，表示该选项默认被选中。
需要注意的是，同一组单选按钮，name的取值一定要一致。
4.下拉列表框。
-基本语法，如下：

<form>    <select>        <option value='提交值'>选项</option>    </select></form>

含义显而易见，不再解释了。其中，若有select="selected"属性，表示该选项默认被选中。
-在select标签中设置multiple="multiple"属性，就可以实现多选功能。
5.使用提交按钮，提交数据。语法为<input type="submit" value="按钮上显示的文字">，重置按钮亦如是，只是把submit改为reset。
6.label的语法：<label for="控件id名称">，当用户单击该label标签时，浏览器就会自动对焦到label中for指向的id对应的控件，无特殊用法。见例。

<!DOCTYPE HTML><html>    <head>        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">        <title>label使用介绍</title>    </head>    <body>        <h1>label使用介绍</h1>    <form>        <label for="male">男</label>        <input type="radio" name="gender" id="male"/>        <br/>        <label for="female">女</label>        <input type="radio" name="gender" id="female"/>        <br/>        <label for="email">请输入你的邮箱地址</label>        <input type="email" id="email" placeholder="Enter email"/>        <input type="submit" value="确定" name="submit"/>        <input type="reset" value="重置" name="reset"/>    </form>    </body></html>

这里写图片描述

思考：email输入控件怎么用？

0 0