前端应用_html_基本表单的用法_注册页面02

最新推荐文章于 2021-07-08 22:37:38 发布

上海_彭彭

最新推荐文章于 2021-07-08 22:37:38 发布

阅读量241

点赞数

分类专栏： html 文章标签： html 表单 hidden value 属性

本文链接：https://blog.csdn.net/qq_34979346/article/details/97018119

版权

html 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1. label 标签

需求当点击 radio button的文字就选中，或者点击checkbox 的文字就选择

答：用for 属性，示例如下

对文字用 label 包裹，并用for 属性

    <input type="radio"  name="gender" id="male"><label for="male">男</label>
    <input type="radio"  name="gender"id="female"><label for="female">女</label>
        <br /><br /><br />
    <label>爱好: </label>
    <input type="checkbox"  name="love" id="p"><label for="p">python</label>

    <input type="checkbox"  name="love" id="j"><label for="j">java</label>

    <input type="checkbox"  name="love" id="r"><label for="r">rubby</label>

当点击文字就可以选择了，自己尝试下

2. reset 类型

reset 就是重置form 填入的值

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

3. hidden 类型

在页面上不显示，作用就是存储值

    <input type="hidden" name="hidden" value="1000 ">

提交后在url 就可以看到 hidden 的值如下：
http://localhost:63342/Unittest/www.baidu.com?username=&userpassword=&upload=&text=&hidden=1000+

解释value 属性的作用

value=“” 这个属性他的目的就是传输值的作用，通过下边的例子就可以看出来了。

我在html 加入 value 的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 这是注释的格式-->

</head>
<h1>表单制作</h1>
<form action="www.baidu.com">
<div>
    <label>用户名: </label>
    <input type="text"  name="username">
    <br /><br /><br />
    <label>密码: </label>
    <input type="password"  name="userpassword">
        <br /><br /><br />
    <label>性别: </label>
    <input type="radio"  name="gender" id="male" value="m"><label for="male">男</label>
    <input type="radio"  name="gender"id="f"><label for="female">女</label>
        <br /><br /><br />
    <label>爱好: </label>
    <input type="checkbox"  name="love" id="p" value="python"><label for="p">python</label>

    <input type="checkbox"  name="love" id="j" value="java"><label for="j">java</label>

    <input type="checkbox"  name="love" id="r" value="rubby"><label for="r">rubby</label>
        <br /><br /><br />
    <label>籍贯: </label>

    <select>
        <option name="jig" value="sd">山东</option>
        <option  name="jig" value="hn">河南</option>
        <option name="jig" value="sh">上海</option>
        <option  name= "jig" value="sz">深圳</option>

    </select>
        <br /><br /><br />
    <label>上传: </label>
    <input type="file" name="upload">
        <br /><br /><br />
    <label>个人描述: </label>
    <textarea name="text"></textarea>
        <br /><br /><br />
    <input type="submit" value="submit ">
     <input type="reset" name="" value="重置 ">
    <input type="hidden" name="" value="1000 ">
</div>
</form>
</html>
</body>
</html>

在页面输入值然后提交 URL 显示的内容,
http://localhost:63342/Unittest/www.baidu.com?username=to'm&userpassword=123&gender=m&love=python&upload=&text=tttt

默认为get 方式，key 显示的name的属性值，key 的value 把属性value 的值塞到 url 里了，value 的目的是传输数据用。

你也可以把 action 的 method 改写为 post ，就不会在url 显示了。