表单元素

form元素

为用户创建html表单
表单可以向服务器发送数据
form标签中可以包含很多表单元素

<form action="http://www.baidu.com" method="get">Copy to clipboardErrorCopied

action属性：
- 表单提交的地址
method属性：
表单提交的方式数据传输的方式
- 常见的两种方式是 get和post
  
  get是从服务器上获取数据，post是向服务器传送数据。
  
  在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式

表单的提交

表单提交需要在表单中书写提交按钮。
提交按钮可以是 <button type=submit></button> 或 <input type=submit value='' >
提交按钮只会提交当前按钮所在的form表单中的内容如果没有form标签，表单提交失效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>
    <form action="http://www.baidu.com" method="get">
        <!--表单元素-->

        <!--input标签的type类型是submit代表提交  value是按钮显示的内容-->
        <!-- 本次提交为空 -->
        <input type="submit" value="提交">
    </form>
</body>
</html>
Copy to clipboardErrorCopied

html表单的类型

input：type类型的值不一样，呈现的状态也是不一样的

text：单行文本输入框（文本域）没有长度和内容限制，只能输入一行，明文显示表单提交都是以键值对的形式提交的比如 user = lipeihua

name属性就是给表单起一个名字（自己命名，一般是后台提供） value属性就是表单的值，可以预定义也可以等待用户输入 name和value就构成了一个键值对如果构不成一个键值对，就不会进行提交
password：密码输入框默认把输入的内容呈现出小黑点
radio：单选框书写name属性后，可以在同name属性的单选框中进行单选应该书写value值，是向后台提供的数据在单选框前后写的内容，和input没有任何关系，只不过让用户视觉上觉得有关联
checkbox：多选框其他同单选框
file: 上传文件按钮
hidden：提交隐藏内容在表单提交过程中有的数据需要提交，但是不需要用户输入或者是修改，那么直接使用隐藏域提交

button: 单纯的按钮，没有任何作用和功能，只是长了按钮的样子如果需要添加功能，可以使用js value值是按钮中的文字

reset: 重置按钮当重置按钮被点击，就会重置当前reset所在的表单，变成默认的状态
submit：提交按钮 input标签的type类型是submit代表提交 value是按钮显示的内容提交按钮只会提交当前按钮所在的form表单中的内容如果没有form标签，表单提交失效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>
    <form action="http://www.baidu.com" method="get">
        请输入用户名：
        <input type="text" name="user" value="lipeihua">
        <br>
        
        请输入密码：
        <input type="password" name="pass" value="">
        <br>

        请选择性别：
        男：<input type="radio" name="sex" value="男">
        女：<input type="radio" name="sex" value="女">
        未知：<input type="radio" name="sex" value="未知">
        <br>
        
        选择你最喜欢的语言：
        PHP：<input type="checkbox" name="lang" value="PHP">
        JAVA：<input type="checkbox" name="lang" value="JAVA">
        JS：<input type="checkbox" name="lang" value="JS">
        HTML：<input type="checkbox" name="lang" value="HTML">
        <br>

        请上传你的照片：
        <input type="file" name="photo">
        <br>

        <input type="hidden" name="id" value="00000000001">

        <input type="button" value="点我啊" id="btn">

        <br>

        <input type="reset" value="重置啊">

        
        <input type="submit" value="提交">
    </form>
    <script>
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function () {
            alert("hello world");
        }
    </script>
</body>
</html>Copy to clipboardErrorCopied

其他表单元素

select&option
- 下拉列表
- option代表列表的每一项
  
  显示出来的值应该放在option标签中
  
  提交的内容是放在option的value属性中
  
  select是列表的外层
  
  表单的name是在select中书写
textarea：
- 多行文本输入框
- 右下角可以放大缩小
- cols和rows用来控制宽和高
  
  cols代表一行有几个字符（一个汉字算两个字符）
  
  rows代表总共几行，超出是要生成滚动条的
  
  但是：我们很少这样控制，主要通过css的width和height控制
  
  textarea没有value属性，输入的值直接就是textarea标签中的内容
button：
- HTML <button> 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。默认情况下，HTML按钮的显示样式接近于 user agent 所在的宿主系统平台（用户操作系统）的按钮，但你可以使用 CSS 来改变按钮的样貌。
- type：button的类型。可选值：
  
  submit: 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。
  
  reset: 此按钮重置所有组件为初始值。
  
  button: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他表单元素</title>
</head>
<body>
<form action="###" method="get">
    请选择你喜欢的城市
    <select name="city" >
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="深圳">深圳</option>
        <option value="草围">草围</option>
    </select>

    <br>
    
    请说出你对我们的留言：
    <textarea name="message" cols="30" rows="10" ></textarea>

    <button></button>
    <input type="submit" value="提交">
</form>
</body>
</html>Copy to clipboardErrorCopied

button和input的区别

在 button 元素内部，可以放置文本或图像。这是<button>与使用 input 元素创建的按钮的不同之处。
二者相比较， <button> 控件提供了更为强大的功能和更丰富的内容。
<button>与</button>标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。
例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>button</title>
</head>
<body>
<form action="###" method="get">
    <input type="text" name="user" value="">

    <button type="button">点击我呀</button>
    <button type="button">
        <img src="../images/06.png" alt="">
    </button>
</form>
</body>
</html>Copy to clipboardErrorCopied

获取焦点和失去焦点

获取焦点

当表单元素变成一个可以输入的状态的时候，被称作为获取焦点
失去焦点

当表单元素失去可以输入状态的时候，被称作为失去焦点

label标签

label元素:为表单元素定义标注（点击标注的信息，可以让表单元素获取焦点）
两种使用方法：
1. label标签包含住标注元素，让label标签的for属性和被标注的表单元素的id属性值相等
2. label标签包住整个标注元素和相对应的表单元素
  
  label不能出现for属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>button</title>
</head>
<body>
<form action="###" method="get">

    <label for="user">请输入用户名：</label>
    <input type="text" name="user" value="" id="user">

    <label>
        男 <input type="radio">
    </label>

    <button type="submit">点击我呀</button>

</form>
</body>
</html>Copy to clipboardErrorCopied

label标签包含其他表单元素

对select来说只能获取焦点，但是不能把列表下拉出来
可以使textarea获取焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>button</title>
</head>
<body>
<form action="###" method="get">

    <label for="city">选择城市</label>
    <select name="city" id="city">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
    </select>

    <label for="mes">留言</label>
    <textarea name="mes" id="mes" cols="30" rows="10"></textarea>
    

    <button type="submit">点击我呀</button>

</form>
</body>
</html>

posted @ 2023-01-09 22:50 z_bky 阅读(90) 评论(0) 收藏举报

刷新页面返回顶部

z-bky

表单元素

form元素

表单的提交

html表单的类型

其他表单元素

button和input的区别

获取焦点和失去焦点

label标签

label标签包含其他表单元素

公告