表单_1

2023-09-22 88 0

表单

在网页中主要负责数据采集功能,一个表单有三个基本组成部分: 表单标签、 表单域和表单按钮

表单语法

        <!-- form表单标签 action表示向何处发送表单数据 method发送表单数据的方式--><form action="ceshi.html" method="post"><!-- type类型 nameinput元素名称 valueinput默认值 maxlength输入字符个数 size input宽度--><p><input type="text" name="userName" value="123" maxlength="6" size="1"></p><p><input type="password" name="pwd"/></p><p><input type="submit" /><input type="reset" /></p></form>

get:表单上的内容会完全显示在地址栏上,而post则不会,通常采用post方式提交表单数据

表单元素的格式

            <!-- type input元素类型 name input元素名称 value input元素的值 maxlength输入字符个数 size表单元素的宽度--><p><input type="text" name="userName" value="123" maxlength="6" size="1"></p>

表单元素

文本框

            <p><!-- type 文本框 name 文本框名称 value 文本框初始值maxlength 文本框可输入最大字符数 size文本框长度--><input type="text" name="userName" value="123" maxlength="6" size="1"></p>

密码框

            <p><!-- type密码框 name密码框名称 size密码框的长度 --><input type="password" name="pwd" size="6"/></p>

提交、重置按钮

                <!-- type提交、重置 name名称 value按钮上显示的文字  --><input type="submit" name="submit" value="提交按钮" /><input type="reset" name="reset" value="重置按钮"/>

单选按钮

                <!-- radio 单选 name需要一致表示互斥 ?radio1=1#表示value的值而不是后面写的1 checked单选按钮选中状态 --><input type="radio" name="radio1" value="1" checked>1<br /><input type="radio" name="radio1" value="2" />2

复选框

                <!-- checked复选框 name一致 value值 checked复选框选中状态 --><input type="checkbox" name="333" value="basketball" checked />篮球<input type="checkbox" name="333" value="football" />足球<input type="checkbox" name="333" value="music" />音乐<input type="checkbox" name="333" value="cooking" />做饭

列表框

            <!-- select列表框 name只有一个  --><select name="job"><!-- value选项值 --><option value ="teacher">教师</option><option value ="student">学生</option><!-- selected 默认选中 --><option value ="worker" selected>工人</option><option value ="encourage">鼓励师</option></select>

图片按钮

            <!-- type图片按钮 src 图片路径 --><input type="image" src="img/img1.png">

文本域

            <!-- textarea文本域 name名称 cols显示的列 rows显示的行--><textarea name="words"  rows="10" cols="100">文本内容</textarea>

页面展示:
在这里插入图片描述

邮箱

            <!--email邮箱 输入框会自动验证email格式是否正确  --><p><input type="email" name="email"><input type="submit"/></p>

文件

            <!-- file文件 --><p><input type="file" name="files"/><input type="submit" value="点我上传" name="upload"></p>

页面展示:
在这里插入图片描述

网址

            <!-- url 输入框会自动验证url格式是否正确--><p><input type="url" name="url"><input type="submit"></p>

页面展示:
在这里插入图片描述

数字

            <!-- number数字 min最小值 max最大值 step合法的数字间隔 value默认值--><p><input type="number" name="num"min="0" max="100" step="3" value="4"><input type="submit"></p>

页面展示:
在这里插入图片描述

滑块

            <!-- range滑块 min最小值 max最大值 step合法的数字间隔 value默认值 --><p><input type="range" name="range" min="1" max="50" step="3" value="5"><input type="submit"></p>

页面展示:
在这里插入图片描述

搜索框

           <!-- search搜索框 --><p><input type="search" name="search"><input type="submit"></p>

页面展示:
在这里插入图片描述

一般按钮

                <input type="button" value="input按钮框" onclick="javascript:alert('你好')"><button onclick="javascript:alert('你好')">button框</button>

页面展示:
在这里插入图片描述

代码编程
赞赏

相关文章

Z5NTS功能之icmp
Flink原理与调优
软件工程课堂作业(七)——电梯调度之需求规格说明书
软件工程课堂训练——电梯调度问题需求分析
武汉:社区万家宴热闹开席 万道自制菜肴迎新春
2023年7大最佳免费主机