HTML(3)--表单

最新推荐文章于 2022-05-17 09:01:48 发布

sdsjx01

最新推荐文章于 2022-05-17 09:01:48 发布

阅读量190

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： html 表单下拉框 input

本文链接：https://blog.youkuaiyun.com/sdsjx01/article/details/88911931

HTML 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了HTML表单的作用，详细讲解了form表单域的action和method属性，以及input控件的多种类型如text、password、radio等。还探讨了input的placeholder、disabled和checked属性，以及select下拉框和option选项标签的使用，包括size和selected属性。此外，提到了textarea的cols、rows和resize属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单的作用：HTML 表单的主要作用是接收用户的输入，当用户提交表单时，浏览器将用户在表单中输入的数据打包，并发送给服务器，从而实现用户与Web服务器的交互。

form表单域中的属性

action 提交地址

method 提交方式,get 和 post，post保密性好

表单是特殊重要的元素，所以都会给表单写ID

input 表单控件

属性：type

属性值：

text 文本输入框

password 密码框

radio 单选框

submit 提交按钮

reset 重置按钮

image 图片提交按钮很少用

file 上传文件

标签属性：

placeholder 提示文本

disabled 禁用当前表单控件

checked 默认选中

select 下拉框标签：

option 下拉框选项标签

标签属性：

size 设置能看到的选项数目

selected 默认显示哪一项选项

textarea多行文本框/文本域标签

cols 定义宽度

rows 定义高度

resize 设置调整文本域的尺寸

none 不许调整

vertical 可以调整高度

horizontal 可以调整宽度

    <!--表单域：form
				action属性：表单提交的路径
				name属性：表单的名称
				method属性：数据传输的方式（get/post）
			表单控件：input:大部分表单元素都通过input完成
				value:属性定义表单域的默认值。其他属性根据type的不同而发生变化
				maxlength:属性控制最多输入的字符数
				placeholder:属性可以保存之前输入的值，选中时消失
				type属性：去定义表单元素生成的类型
					type="text":文本框。
					type="password":密码框。
					type="submit":提交按钮。
					type="reset"：重置按钮。
					type="button":控按钮。
		-->
		<form name="fm" method="post" action="">
			<!--placeholder属性可以保存之前输入的值 -->
			姓名：<input type="text" value="默认值"  placeholder="请输入姓名" /><br /><br />
			密码：<input type="password"  /><br />			
			<!--
            	复选框和单选框：
            	单选框：必须要有name属性且name属性的值必须一样
            		属性及作用
            			disabled="disabled" 禁用
            			checked="checked" 默认选中		
            -->
           	    <input type="radio" name="sex" />男
				<input type="radio"  name="sex"/>女<br />
            	爱好：运动<input type="checkbox" checked="checked" name="yd"/>
            		聊天<input type="checkbox" name="lt"/>
            		玩游戏<input type="checkbox" name="wyx"/><br />
            <!--
            	下拉菜单
            -->
                                    出生年月
            <select>
            	<option>1991</option>
            	<option>1991</option>
            	<option>1991</option>
            </select>年
            <select>
            	<option>1</option>
            	<option>2</option>
            	<option>3</option>
            </select>月
            <!--普通按钮-->
            	<input type="button" value="下一页" />
            <!--提交form表单和重置（清空输入框中的值） -->
				<input type="submit" value="提交" />
				<input type="reset" value="重置" /><br />
		</form>