首页 前端知识 【HTML】为网页添加表单(控件)

【HTML】为网页添加表单(控件)

2024-10-28 20:10:42 前端知识 前端哥 196 379 我要收藏

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>

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19348.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!