zoukankan      html  css  js  c++  java
  • html的表单

    #转载请留言联系

    表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下:

    1、<form>标签 定义整体的表单区域

    • action属性 定义表单数据提交地址
    • method属性 定义表单提交的方式,一般有“get”方式和“post”方式

    2、<label>标签  label 标签不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

    3、<input>标签 定义通用的表单元素

    • type属性
      • type="text" 定义单行文本输入框
      • type="password" 定义密码输入框
      • type="radio" 定义单选框
      • type="checkbox" 定义复选框
      • type="file" 定义上传文件
      • type="submit" 定义提交按钮
      • type="reset" 定义重置按钮
      • type="button" 定义一个普通按钮
    • value属性 定义表单元素的值
    • name属性 定义表单元素的名称,此名称是提交数据时的键名

    4、<textarea>标签 定义多行文本输入框

    5、<select>标签 定义下拉表单元素

    6、<option>标签 与<select>标签配合,定义下拉表单元素中的选项

    示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
    </head>
    <body>
        <!--action 定义表单数据提交地址-->
        <form action="http://www.baidu.com" method="post">
            <!--单行文本框-->
            <input type="text" name="username" placeholder="请输入账号"><br><br>
            <!--密码框-->
            <input type="password" name="password" placeholder="请输入密码"><br><br>
            <!--单选框-->
            性别:<label><input type="radio" name="sex" value="1"></label>
            <label><input type="radio" name="sex" value="2"></label>
            <!--多选框-->
            <br><br>
            最喜欢的游戏:
            <label><input type="checkbox" name="fav" value="LOL">英雄联盟</label>
            <label><input type="checkbox" name="fav" value="shoot">喷射战士</label>
            <label><input type="checkbox" name="fav" value="zelder">塞尔达传说</label>
            <label><input type="checkbox" name="fav" value="mario">马里奥</label>
            <!--上传图片-->
            <br><br>
            <input type="file" name="pic">
            <!--多行文本框-->
            <br><br>
            <textarea name="text" cols="30" rows="10"></textarea>
            <!--下拉列表-->
            <br><br>
            <select name="city">
                <option value="gz">广州</option>
                <option value="sz">深圳</option>
                <option value="zh">中山</option>
            </select>
            <!--提交表单-->
            <input type="submit" value="提交">
            <!--重置表单-->
            <input type="reset" value="重置">
        </form>
    </body>
    </html>
  • 相关阅读:
    中国开源现状如何?
    程序员怎么升职?
    如何从挫败感到成就感,身为程序员每天都在经历这些!
    现实版“无间道”,4名煞星潜伏,只为拖库!
    想想当初为什么做程序员!
    做程序员累的时候想想这个!
    别人问我:为什么程序员都不善言辞?惭愧啊!
    程序员被沦陷!国内程序员真的饱和了?
    JS和JSP的区别?
    web.xml配置WebApplicationContext的两种方法
  • 原文地址:https://www.cnblogs.com/chichung/p/9664362.html
Copyright © 2011-2022 走看看