zoukankan      html  css  js  c++  java
  • HTML表单标签


    1.为什么需要表单
    表单是为了 收集用户信息。


    2.表单的组成
    在HTML中,一个完整的表单通常由表单域,表单控件(表单元素)和提示信息,3个部分组成。
    (1)表单域
    在html中,<form>标签用于定义表单域,以实现用户信息的收集和传递
    <form>会把它范围内的表单元素信息提交给服务器
    <form action="ul地址" method="提交方式" name="表单域名称">
    各种表单元素控件
    </form>
    属性 属性值 作用
    action ul地址 用于指定接收并处理表但是据服务器程序url地址
    method get/post 用于设置表单数据的提交方式,其取值为get或post
    name 名称 用于指定表单的名称,以区分同一个页面中的多个表单域
    (2)表单控件(表单元素)【input  select  textarea】
    表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单输入或选择的内容
    控件
      1_input 输入表单元素
           在<input>标签中,包含一个type属性,根据不同的type属性,输入字段拥有很多形式
          (可以是文本字段,复选框,掩码后的文本控件,单选按钮,按钮等)。
           <input type = "属性值" />
             (1)input是一个单标签
                     1.type属性设置不同的属性值用来指定不同的控件类型
                         属性值:
                          text 文本框,用户输入文本,默认宽度为20个字符
                          password 定义密码字段,该字段的字符被掩码
                          radio 定义单选按钮
                          checkbox 定义复选框
                          submit 定义提交按钮,按钮会把表单数据传送给服务器
                          reset 重置按钮,重置所有数据
                          button 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本)
                          file 定义输入字段和“浏览”按钮,供文件上传
                      2.name 由用户自定义 定义input元素名称
                      3.value 由用户定义 规定input元素的值
                      4.checked checked 规定input元素首次加载时被选中
                      5.maxlength 正整数 规定输入字符串最大长度
                       注意:1.name和value是每个表单元素都有的属性值,主要给后台人使用
                                  2.name指表单元素的名字,要求单选按钮和复选按钮要有相同的name值
                                  3.checked属性主要针对对于单选框和复选框,主要作用一打开页面,就可以默认选中某个表单

                   (2)<label>标签
                    <label>标签为input元素定义标注(标签)。
                   <label>标签用于绑定一个表单元素,当点击<label>标签内文本的时候,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户的体验
                   <label for="sex">男<label>
                   <input type="radio" name="sex" id="sex">
        2_select 下拉表单元素
              在页面中,如果多个选项让用户选择,并且想要节约页面空间,我们可以使用<select>标签控件定义下拉标签
              语法:
              <select>
                <option>选项1</option>
                <option>选项2</option>
                <option>选项3</option>
                ...
             <select>
             注意:<select>中至少含有一堆<option>
             <option>中定义selected = "selected"时,当前项即为默认选项
        3_textarea 文本域元素
             使用场景:当用户输入内容较多时,我们就不能使用文本框表单了,此时我们可以使用<textarea>标签
             在表单元素中,<textarea>标签用于定义多行文本输入的控件。
             <textarea row="3" cols="20">
              文本内容
              </textarea>
              重点注意:1.通过<textarea>标签可以轻松创建多行文本输入框
                                2.cols = "每行的字符数",rows="显示的行数",我们在实际开发中不会使用,都是CSS来改变大小。

  • 相关阅读:
    内存Fuzz和WinAFL
    AFL分析与实战
    协议Fuzz技术
    Fuzz技术综述与文件Fuzz
    WireShark学习笔记(一)
    虚拟机连接的问题
    jq 时间的代理和父级的删除
    Windows(WSL2) Linux子系统搭建Docker环境
    JavaCV FFmpeg H264编码
    JavaCV FFmpeg AAC编码
  • 原文地址:https://www.cnblogs.com/qiujie-prion/p/12963992.html
Copyright © 2011-2022 走看看