06_HTML表单标签

最新推荐文章于 2023-10-23 11:47:39 发布

The Biggest

最新推荐文章于 2023-10-23 11:47:39 发布

阅读量140

点赞数

分类专栏：前端学习文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/java_996/article/details/120958368

版权

前端学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

表单标签

表单标签主要用于收集用户信息，常用于注册页面

常用标签及属性：

form标签：表单域：用form标签定义，包含表单元素的区域，双标签

action属性：URL地址，用于指定接收并处理表单数据的服务器程序的url地址

method属性：get/post,用于设置表单数据的提交方式，默认都是get

name属性：用于指定表单的名称，区分同一页面的多个表单域

input标签：输入表单元素，单标签。type属性必写

name属性：由用户定义，定义input元素的名称。单选按钮和复选框要有相同的name值

value属性：表单值，直接赋值给input，一般给单选或者多选使用来返回值,主要是后台人员使用

checked属性:用于单选和多选，当页面打开就可以默认选中这个选项

maxlength属性：用于规定最大输入长度

type属性的值：

1.button：可点击按钮（作用函数由js书写）,必须写value属性，不提交数据

2.text：文本

3.password:密码,看不但

4.radio：单选按钮，实现多选一

5.checkbox：复选

6.submit:提交表单按钮

7.reset:重新设置，将全部已经填写的信息重置为初始值，作用空间为一个表单

8.file：上传文件使用的

label标签：用于绑定一个表单元素，当点击标签内的文本时，浏览器会自动将焦点或光标转到或者选择对应表单元素上，增加用户体验

for属性：内容和input标签的id属性必须一致。

select标签：下拉标签，当页面选择项内容过多，节省页面空间，使用它，常用于选择地址（省份，城市，区）

一个select是一个下拉框，每个选择用一个option标签包裹,每个select至少需要一个option

默认选项：option的属性：selected=“selected”

textarea标签：双标签当用户要输入大量文字信息时，比如建议，评价时使用，是一个大号的,可以直接显示空格

cols:可写列数

rows:可写行数

一般使用css来设置行列数

但是可以超出书写，会自动生成一个滚条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title> 
    <!-- 表单标签：收集用户信息，常用于注册页面 -->
    <!-- 一个表单由表单域、表单控件、提示信息三部分组成 -->

</head>
<body>
    <!-- 表单域：用form标签定义，包含表单元素的区域 -->
    <!-- form会把它范围内的表单元素信息提交给服务器 -->
    <!-- <form action="URL地址" method="提交方式" name="表单域名称"> 控件 </form> -->
<!-- 
    form常用属性：
    1.action：
    属性值：url地址，用于指定接收并处理表单数据的服务器程序的url地址
    2.method：（提交方式）
    属性值：get/post,用于设置表单数据的提交方式，默认都是get
    3.name:
    属性值：名称，用于指定表单的名称，区分同一页面的多个表单域。
 -->
 <form action="demo.php" method="get" name="name1">
 <!-- form标签就是表单域，主要在服务器编程中学习 -->

 <!-- 
     input：输入表单元素，单标签。type属性必写。

    name属性：由用户定义，定义input元素的名称。单选按钮和复选框要有相同的name值
    value属性：表单值，直接赋值给input，一般给单选或者多选使用来返回值,主要是后台人员使用
    checked属性:用于单选和多选，当页面打开就可以默认选中这个选项
    maxlength属性：用于规定最大输入长度

     type属性的值：
            1.button：可点击按钮（作用函数由js书写）,必须写value属性，不提交数据
            2.text：文本
            3.password:密码,看不但
            4.radio：单选按钮，实现多选一
            5.checkbox：复选
            6.submit:提交表单按钮
            7.reset:重新设置，将全部已经填写的信息重置为初始值
            8.file：上传文件使用的
  -->

  请上传头像:<input type="file"><br>
  <label for="text">用户名</label>
  <input type="text" id="text"> <br>
  用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
  密码：<input type="password" name="password" value=""> <br>
  电话：<input type="text" name="number" maxlength="11">
  <!-- 按钮 -->
  <input type="button" name="code anniu" value="获取验证码">  <br>

  输入验证码：<input type="text" name="yanzhengma "  > <br>


  <!-- 
      label标签：用于绑定一个表单元素，当点击标签内的文本时，浏览器会自动将焦点或光标转到或者选择对应表单元素上，增加用户体验
      for属性内容和input标签的id属性必须一致。
   -->

  <!-- name是表单元素的名字，这里性别单选按钮必须有相同的名字name，才可以实现多选一 -->
  性别：男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex" value="女">  <br>
  性别：
  <label for="radio_nan">男</label>
  <input type="radio" name="sex" value="man" checked="checked" id="radio_nan"> 
  <label for="radio_nv">女</label>
  <input type="radio" name="sex" value="woman" id="radio_nv">  <br>

  爱好：吃饭<input type="checkbox" name="hobby" value="吃饭">    睡觉 <input type="checkbox" name="hobby" value="睡觉" checked="checked">   
  打豆豆<input type="checkbox" name="bobby" value="打豆豆">  <br>

  <!-- 
    select标签：下拉标签，当页面选择项内容过多，节省页面空间，使用它，常用于选择地址（省份，城市，区）
    一个select是一个下拉框，每个选择用一个option标签包裹,每个select至少需要一个option
    默认选项：option的属性：selected="selected"
 -->

  籍贯：
  <select name="jiguan" id="">
      <option value="">陕西</option>
      <option value="">山东</option>
      <option value="">四川</option>
  </select>
  <br>
  默认籍贯案例：
  <select name="" id="">
      <option value="">陕西</option>
      <option value="">山东</option>
      <option value="" selected="selected">四川</option>
  </select>
  <br>

 <!-- 
     textarea标签：双标签 当用户要输入大量文字信息时，比如建议，评价时使用，是一个大号的<input type="text">,可以直接显示空格
     cols:可写列数
     rows:可写行数
     一般使用css来设置行列数
     但是可以超出书写，会自动生成一个滚条
  -->
  建议： <textarea name="" id="" cols="10" rows="5">请在这里输入您对我们的建议</textarea> <br>

  <input type="submit">
  <input type="submit" value="免费注册">
  
  <!-- 重置按钮的作用区间是整个表单，不在表单中将会失效 -->
  <input type="reset">
</form>
 
</body>
</html>

The Biggest

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
06_HTML表单标签

表单标签表单标签主要用于收集用户信息，常用于注册页面常用标签及属性：form标签：表单域：用form标签定义，包含表单元素的区域，双标签 action属性：URL地址，用于指定接收并处理表单数据的服务器程序的url地址 method属性：get/post,用于设置表单数据的提交方式，默认都是get name属性：用于指定表单的名称，区分同一页面的多个表单域input标签：输入表单元素，单标签
复制链接

扫一扫