表单的介绍

发布于:2023-01-04 ⋅ 阅读:(346) ⋅ 点赞:(0)

        

目录

表单域:

form 表单 :

表单控件:

input 输入

label 标注:

select 下拉 :

textarea 多文本:


        一个完整的表单包括三个部分:表单域,表单控件(表单元素),提示信息。

表单域:

         一个包含表单元素的区域。

form 表单 :

        <form>用于定义表单域,实现用户信息的收集和传递,<form>表单会把它范围内的表单元素信息提供给服务器。

<form action = "url地址" method = "提交方式" name = "表单域的名称" >
各种元素
</form>

属性 属性值 作用
action url地址 指定服务器url地址
method get/post 设置表单数据的提交方式
name 名称 指定表单域的名称,用于区分多个表单域

表单控件:

        在表单域中可以定义各种表单元素,这些元素就是允许用户在表单中输入或者选择的内容控件。

input 输入

<input type = "属性值" >

type : 不同的值对应不同的形式,如文本、复选、按钮等等。

属性值 效果
button 按钮
checkbox 复选框
file 定义输入字段以及浏览按钮供文件上传
hidden 隐藏的输入字段
image 图像形式提交按钮
password 密码字段,该字符被掩码
radio 单选按钮(多选一要有相同的name属性)
reset 重置按钮,清除表单中的所有数据
submit 提交
text 单行输入字段,输入文本,默认20字符

<input> 的其他属性

属性 属性值 作用
name 自定 定义input的名称
value 自定 规定input的值
checked checked 规定默认选中(单选、复选)
maxlength 正整数 输入字符的最大长度

label 标注:

        为<input>元素定义标注,用于绑定一个表单元素,当点击标签内的文体时,浏览器自动将点转到对应表单元素上,增加用户体验。

<label for = "sex" > 男 </label>
<input type = "radio" name = "sex" id = "sex" />
 

                                                        用 for 对应 id

select 下拉 :

        下拉表单元素,有多个选项让用户选择时并要节约空间。

<select>
	<option >选项一</option>
	<option selected = "selected ">默认选中</option>
	<option >选项三</option>
	</select>

textarea 多文本:

         多行文本框,用户输入的内容较多时。

<textarea cols="10" rows=" 5">
	cols :每行的字符数
	rows : 显示的行数
	</textarea>


网站公告

今日签到

点亮在社区的每一天
去签到