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

news2025/1/13 10:33:00

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>