• 表单form的属性,单行文本框、密码框、单选多选按钮


    基础表单结构:

    <body>

      <h1>

      <hr />

      <form action="" name="myFrom" enctype="multipart/form-data >

        <input type="text" name="unname" /><br/>

        <input type="password" name="pwd" /><br/>

        <input type='submit" value="提交" />

      </form>

    </body>

    {form表单的属性}

      action=“URL”:一个URL地址:指定form表单向何处发送数据。

    .它里面放一个路径,我们在代码编辑器中写form是总会自带着它,<form action="">.

    .就是我们表单提交到服务器需要一段程序来处理,那有哪个程序处理就可以在action中指定,如果我是注册,可以由注册的程序来处理,登录由登录的程序来处理

      name作用是给表单起名,为了便于我们操作,一个页面不止一个表单好用来区分

    <form name="regFrm">通常我们给表单起名这样起:reg是这个表单是干什么的(reg注册)后面以Frm结尾,就是form的缩写。

        enctype=“string”:规定在发送表单之前,如何对表单数据进行编码。通常在使用文件上传时,我们会写enctype=“multipart/form-data”,以二进制传输。

      method=“get/post”:指定表单以何种方式发送到指定的服务器程序最常用的是个头和post。

    表单元素:

    。单行文本框<input type="text" />默认值是type=“text”

    。密码框<input type="password" />

    。单选按钮<input type="radio" />例子:

    写作业了:<input type="radio" checked="checked" name="gender" value="male" /><br />

    没写作业:<input type="radio" name="gender" value="female">

      checked属性,默认选中当前的单选按钮,name是命名,value值是提交给后台程序看的。“相同的名字会把radio分为一组,一组radio只能选择一个。”名字相同即为一组让这一组radio产生关联用name。

    。复选框<input type="checkbox" />

    和单选按钮差不多

    。隐藏域<input type="hidden" />

    。文件上传<input type="file" />

      <form action="" method="post" enctype="multipart/form-data" >

        <input type="file" name="file1" />

      </form>

    。下拉框<select>标签<select><option value="1">北京</option></select>

    。多行文本框<textarea></taxtarea>

    。标签<lable></lable>为input元素定义标注。

    label本身不会有特殊效果,但它和其他input标签使用可以提升用户的使用体验,用户不用非得点击到按钮,而是点击文字即可选中。<label>虽然和input进行了关联,但是提交的依然是value的值,label中的内容不会被提交。label标签一般和radio、CheckBox类型一起使用。

    <form>

      <label for="male">Male</label>

      <input type="radio" name="sex" id="male" />

    </form>

    。元素集<fieldset></fieldset>

    。提交按钮<input type="submit" />

    。普通按钮<input type="button" />

    。重置按钮<input type="reset" />

    练习:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title></title>
    </head>
    <body>
      <form action="" name="lainxiForm" enctype="multipart/form-data" method="get">
      账号:<input type="text" name="noname" />
      密码:<input type="password" name="pwd" />
           <input type="submit" value="提交"/>
      <!--(单选有无name都可以)-->
      </form><hr />
      <form action="" name="forName" method="get">你喜欢什么:
        <label for="juhua">菊花</label><input type="radio" name="lianxi" checked="checked" id="juhua"value=""/>
        <label for="kuihua">葵花</label><input type="radio" name="lianxi" id="kuihua" value=""/>
        <!--value值要传送到后台服务器,需要后台人员告诉你-->
        <!--复选框需要name联系在一起-->
        <input type="submit" value="提交"/>
      </form>
      <hr />
      <form>
        你的爱好是:
        睡觉<input type="checkbox" name="hobby"/>
        吃<input type="checkbox" name="hobby" />
        写代码<input type="checkbox" name="hobby" checked="checked"/>
        <input type="submit" />
    </form>
    </body>
    </html>

  • 相关阅读:
    分布式事务与Seate框架(3)——Seata的AT模式实现原理
    MySQL是如何实现事务隔离?
    分布式事务与Seate框架(2)——Seata实践
    分布式事务与Seate框架(1)——分布式事务理论
    docker的安装以及使用命令
    Sentinel高级
    Sentinel熔断降级
    typora+PicGo+gitee搭建免费的的床
    Jmeter + Grafana + InfluxDB 性能测试监控
    Jmeter-逻辑控制器ForEach Controller的实例运用
  • 原文地址:https://www.cnblogs.com/1111duguxiaoyu/p/6136791.html
Copyright © 2020-2023  润新知