当前位置：首页 > news >正文

【HTML】为网页添加表单（控件）

news 2025/11/24 7:27:55

1、表单

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：一个表单中通常需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：相当于一个容器，用来容纳所有的表单控件和提示信息。

2、创建表单

<form action="url地址" method="提交方式" name="表单名称">各种表单控件
</form>

表单控件：表单控件是表单的核心部分，常见的表单控件有、、。
action：action属性用于指定接收并处理表单数据的服务器程序的url地址。
method：method属性用于设置表单数据的提交方式，其取值为get或post。
name：name属性用于指定表单的名称，以区分同一个页面中的多个表单。

3、input控件

浏览网页时经常会看到单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等，要想定义这些元素就需要使用input控件。

<input type="控件类型"/>

在这里插入图片描述

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input控件</title>
</head>
<body>
<form action="#" method="post">用户名：                                              <!--text单行文本输入框--><input type="text" value="张三" maxlength="6" /><br /><br />  密码：                                                 <!--password密码输入框--><input type="password" size="40" /><br /><br />                         性别：                                                 <!--radio单选按钮--><input type="radio" name="sex" checked="checked" />男<input type="radio" name="sex" />女<br /><br />					兴趣：                                                  <!--checkbox复选框--><input type="checkbox" />唱歌<input type="checkbox" />跳舞<input type="checkbox" />游泳<br /><br />上传头像：<input type="file" /><br /><br />                 <!--file文件域--><input type="submit" />                             <!--submit提交按钮-->                                   <input type="reset" />                              <!--reset重置按钮-->   <input type="button" value="普通按钮" />          <!--button普通按钮-->  <input type="image" src="img/login.gif" />      <!--image图像域-->  <input type="hidden" />                             <!--hidden隐藏域-->                                       
</form>
</body>

效果图：
在这里插入图片描述

4、textarea控件

<textarea cols="每行中的字符数" rows="显示的行数">文本内容
</textarea>

cols和rows为< textarea>标记的必须属性，其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数，取值均为正整数。
在这里插入图片描述

<body>
<form action="#" method="post">
评论：<br /><textarea cols="60" rows="8">
评论的时候，请遵纪守法并注意语言文明，多给文档分享人一些支持。</textarea><br /><br /><input type="submit" value="提交"/>
</form>
</body>

效果图：
在这里插入图片描述

5、select控件

 <select><option>选项1</option><option>选项2</option><option>选项3</option>...</select>

在这里插入图片描述

<body>
<form action="#" method="post">
所在校区：<br /><select>                                            <!--最基本的下拉菜单--><option>-请选择-</option><option>北京</option><option>上海</option><option>广州</option><option>武汉</option><option>成都</option></select><br /><br />
特长（单选）:<br /><select>     <option>唱歌</option><option selected="selected">画画</option>   <!--设置默认选中项--><option>跳舞</option></select><br /><br />
爱好（多选）:<br /><select multiple="multiple" size="4">           <!--设置多选和可见选项数--><option>读书</option><option selected="selected">写代码</option> <!--设置默认选中项--><option>旅行</option><option selected="selected">听音乐</option> <!--设置默认选中项--><option>踢球</option></select><br /><br /><input type="submit" value="提交"/>
</form>
</body>