表单的基础知识和简单应用

最新推荐文章于 2023-03-14 01:22:02 发布

Future_q

最新推荐文章于 2023-03-14 01:22:02 发布

阅读量253

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/Shmily____/article/details/80994174

版权

web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

首先给大家说一下表单的基础内容：

form：表单

form常用属性：
method：表单的提交方式（post和get）
action：表单处理服务器
注意：
凡是用户与服务器交互的表单标签应全部放在form标签内
form内的提交按钮提交的是整个form表单
post方法：
如果采用 POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器
在服务器端，一旦 POST 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数
get方法：
如果采用 GET 方法，浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔
一般浏览器通过上述任何一种方法都可以传输表单信息，而有些服务器只接受其中一种方法提供的数据。可以在 <form> 标签的 method （方法）属性中指明表单处理服务器要用方法来处理数据，使 POST 还是 GET

input：表单元素

input常用属性：
name：类似前端的id，同时前端可以用来js取值和分类
type：input的种类
value：input的值
placeholder（输入类）：文本输入提示（css3新增属性，用来提示文本输入）
checked（选择类）：页面加载时默认选定的 input 元素
disabled/readonly：规定禁用/只读的 input 元素
input的专用伪类选择器：:focus---获得焦点
input的按钮类元素在鼠标移入时不会显示为可以点击的手型，可以用cursor的样式改变其效果，cursor也可以用在其他元素上
例子：做一个类似淘宝搜索商品的表单
type的类型：
- 输入类：text——文本框；password——密码
- 选择类：radio——单选；checkbox——复选
- 按钮类：submit/image——提交/图片提交；reset——重置；button——按钮
- 特殊类：file——上传

label标签：绑定input元素定义标注，并帮助input元素获取焦点

写法1：两个标签分开写，label的for属性的值等于input的id值
写法2：label嵌套成input的父元素

其他表单元素

select/option：下拉选框/下拉选框的选项
对高度的支持不兼容
size（select属性）：用来设置同时显示选项的数量
selected（option属性）：用来设置下拉框的默认选项
textarea：文本域
各个浏览器下的默认滚动条显示不兼容
css3新增 resize 调整尺寸属性 resize: none;
cols/rows属性：列数/行数

然后给大家分享一段代码，表单的简单应用：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
input:focus{ border:none; border-bottom:1px red solid;}
.cursor:hover{cursor:move;}
</style>
</head>
<body>
<form method="get" action="https://s.taobao.com/search">
	<input type="text" name="q" placeholder="请输入用户名"/>
    <input type="text" readonly="readonly" value="我是只读的"/>
    <input type="text" disabled="disabled" value="我是禁用的"/>
    <input type="password" placeholder="请输入密码"/>
    <a href="#">百度</a>
    <input type="submit" class="cursor"/>
</form>
</body>
</html>

效果图：

代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
/*input{width:300px; height:80px; border:1px red solid;}*/
</style>
</head>
<body>
<form method="get" action="http://www.baidu.com">
	<dl>
    	<dt>输入框：</dt>
        <dd><input type="text"/></dd>
        <dt>密码框：</dt>
        <dd><input type="password"/></dd>
        <dt>单选框：</dt>
        <dd>
        	<input type="radio" name="zy" id="rad1"/><label for="rad1">电子</label><br/>
            <input type="radio" name="zy" id="rad2"/><label for="rad2">机械</label><br/>
            <input type="radio" name="zy" id="rad3"/><label for="rad3">信息</label>
        </dd>
        <dt>复选框：</dt>
        <dd>
        	<label><input type="checkbox" name="xq"/>足球</label><br/>
            <label><input type="checkbox" name="xq"/>电脑</label><br/>
            <label><input type="checkbox" name="xq"/>逛街</label>
        </dd>
        <dt>按钮类：</dt>
        <dd>
        	<input type="submit" value="提交"/>
            <input type="image"/><br/>
            <input type="reset" value="重置"/><br/>
            <input id="btn" type="button" value="按钮"/>
        </dd>
        <dt>上传：</dt>
        <dd>
        	<input type="file"/>
        </dd>
        <dt>下拉列表：</dt>
        <dd>
        	<select id="sel1">
            	<option value="北京">北京</option>
                <option selected="selected" value="上海">上海</option>
                <option value="西安">西安</option>
            </select>
        </dd>
        <dt>文本域：</dt>
        <dd>
        	<textarea style="resize:none;" cols="40" rows="5">我是value</textarea>
        </dd>
    </dl>
</form>
<script>
/*document.getElementById("btn").onclick = function (){
	alert(123);
}*/
/*document.getElementById("btn").onclick = function (){
	alert(document.getElementById("sel1").value);
}*/
</script>
</body>
</html>

效果：

Future_q

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表单的基础知识和简单应用

首先给大家说一下表单的基础内容： form：表单 form常用属性：method：表单的提交方式（post和get）action：表单处理服务器注意：凡是用户与服务器交互的表单标签应全部放在form标签内form内的提交按钮提交的是整个form表单post方法：如果采用 POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立...
复制链接

扫一扫