HTML表单基本控件及应用（其二终）

最新推荐文章于 2024-07-14 09:37:06 发布

没事找找Bug

最新推荐文章于 2024-07-14 09:37:06 发布

阅读量496

点赞数

文章标签： html5 前端 idea java

本文链接：https://blog.csdn.net/qq_42405743/article/details/121643895

版权

表单学习

<body>
<h1>注册</h1>
<!-- 表单 from
action：表单提交的位置，可以是网站，也可以是请求的处理地址
method：post、get 提交方式
    get：方式提交：我们可以在url 中看到我们提交的信息，不安全，但是高效
    post：比较安全，传输大文件
-->

<form action="1.我的第一个网页.html" method="get">

    <!-- 文本输入框：input type="text" -->
    <p>名字：<input type="text" name="username"/></p>

    <!--  密码框：input type="password"  -->
    <p>密码：<input type="password" name="pwd"/></p>

    <p>
        <input type="submit"/>
        <input type="reset"/>
    </p>
</form>
</body>

表单基本控件

表单应用

隐藏域 hidden
只读 readonly
禁用 disabled

表单初级验证

思考？为什么要进行表单验证

常用方式：

placeholder 提示信息
required 非空判断
pattern 正则表达式
史上最全常用正则表达式大全：https://www.jb51.net/tools/regexsc.htm

汇总代码：

<body>
<h1>注册</h1>
<!-- 表单 from
action：表单提交的位置，可以是网站，也可以是请求的处理地址
method：post、get 提交方式
    get：方式提交：我们可以在url 中看到我们提交的信息，不安全，但是高效
    post：比较安全，传输大文件
-->

<form action="1.我的第一个网页.html" method="get">

    <!-- 文本输入框：input type="text"
    value="大仙好帅"    默认初始值
     maxlength="8"    最长能写几个字符
     size="30"        文本框的长度
    -->
    <p>名字：<input type="text" name="username" placeholder="请输入用户名" required/></p>

    <!--  密码框：input type="password"  -->
    <p>密码：<input type="password" name="pwd" value="123456"/></p>

    <!--  单选框标签
      input type="radio"
      value：单选框的值
      name：表示组
      -->
    <p>性别：
    <input type="radio" value="boy" name="sex"  checked disabled/> 男孩
    <input type="radio" value="girl" name="sex" /> 女孩
    </p>

    <!--  多选框
    input type="checkbox"
     -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby"/>睡觉
        <input type="checkbox" value="code" name="hobby" checked/>敲代码
        <input type="checkbox" value="chat" name="hobby"/>聊天
        <input type="checkbox" value="game" name="hobby"/>游戏
    </p>

    <!--  按钮
    input type="button"  普通按钮
    input type="image"   图像按钮
    input type="submit"  提交按钮
    input type="reset"   重置
      -->
    <p>按钮：
        <input type="button" name="btn1" value="点击变长">
        <!--   <input type="image" src="../resource/img/1.jpg">     -->
    </p>

    <!--  下拉框，列表框  -->
    <p>
        <select name="列表名称" >
            <option value="china">中国</option>
            <option value="US">美国</option>
            <option value="UK" selected>瑞士</option>
            <option value="yindu">印度</option>
        </select>
    </p>

    <!--  文本域
    cols="50"  50列
    rows="10"  10行
      -->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>

    <!--  文件域
    input type="file" name="files"
     -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传文件" name="upload">
    </p>

    <!--  邮件验证  -->
    <p> 邮箱：
        <input type="email" name="emila" required/>
    </p>
    <!--  URL  -->
    <p> URL：
        <input type="url" name="url" required/>
    </p>

    <!--  数字验证  -->
    <p> 商品数量：
        <input type="number" name="num" max="100" min="0" step="1" required/>
    </p>
    <!--  滑块  -->
    <p> 音量：
        <input type="range" name="voice" min="0" max="100" step="0" />
    </p>

    <!--  搜索  -->
    <p> 搜索：
        <input type="search" name="search">
    </p>
    <!--  增强鼠标可用性  -->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>

    <!--  https://www.jb51.net/tools/regexsc.htm  -->

    <p>自定义邮箱：
        <input type="text" name="diymail" pattern=""/>
    </p>

    <p>
        <input type="submit"/>
        <input type="reset" value="清空表单"/>
    </p>
</form>
</body>

没事找找Bug

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML表单基本控件及应用（其二终）

表单学习<body><h1>注册</h1><form action="1.我的第一个网页.html" method="get"> <!-- 文本输入框：inp
复制链接

扫一扫