表单的简单使用

GQK11

已于 2023-06-28 19:32:34 修改

阅读量37

点赞数

分类专栏：前端文章标签： html5 前端

于 2023-06-28 19:30:47 首次发布

本文链接：https://blog.csdn.net/GQK11/article/details/131443495

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文本框

type text （默认）
name 名字
value 默认值
size 宽度
maxlength 限制输入字符数
name属性值=value属性值提交数据

<!--
    表单
    method 数据提交方式：post和get
    action 数据提交以后，跳转到哪个页面
-->
<form  method="get" action="#">
<!--
   文本框
   type   类型
   name   名字
   value  默认值
   size   文本框长度
   maxlength  最大输入字符数
-->
    <p>
        用户名:<input type="text" name="user" value="" size="10" maxlength="5">
    </p>
</form>

密码框

<body>
    <form action="#" method="get">
        <!--
            密码框
            type的属性值为password
        -->

        密码:<input type="password" name="password"/>
    </form>
</body>

单选框

<body>
    <form action="#" method="get">
        <!--
            单选框
            value 必须要写
            name  一组单选框中属性值要一致
            提交数据时是：name属性值=value的属性值
            checked 默认选择

        -->
        性别: <input type="radio" name="sex" value="nan" checked>男
             <input type="radio" name="sex" value="nv">女
    </form>
</body>

复选框

<body>
    <form action="#" method="get">
        <!--
            复选框
            checked 默认选择
        -->
        <input type="checkbox" name="book" value="xiyouji" checked>西游记
        <input type="checkbox" name="book" value="shuihuzhuan">水浒传
        <input type="checkbox" name="book" value="hongloumeng">红楼梦
        <input type="checkbox" name="book" value="sanguoyanyi">三国演义
        <input type="submit" value="提交">

    </form>
</body>

列表框

<body>
    <form action="#" method="get">
        <!--
            下拉框
            selected 默认选择
        -->
        <select name="sidamingzhu">
            <option value="xiyouji">西游记</option>
            <option value="shuihuzhuan" selected>水浒传</option>
            <option value="hongloumeng">红楼梦</option>
            <option value="sanguoyanyi">三国演义</option>
        </select>

        <input type="submit" value="提交">
    </form>
</body>

按钮

<body>
    <form action="#" method="get">
        <!--
            按钮
            input 中的submit、reset、button和button中的submit、reset、button效果一致
            input 中的image和submit效果一致
        -->
        用户名: <input type="text" name="user"><br><br>
        密&nbsp;&nbsp;码: <input type="password" name="pass"><br><br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="按钮">
        <input type="image" src="./img/renren.gif">

        <hr>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button" value="按钮">按钮</button>

    </form>
</body>

文件域

<body>
    <form action="#" method="get">
        <input type="file">
    </form>
</body>

邮箱和网址

<body>
    <form action="#" method="get">
        <input type="email" name="email">
        <input type="submit">
    </form>
</body>
<body>
    <form action="#" method="get">
        <input type="url" name="url">
        <input type="submit">
    </form>
</body>

多行文本域

标签 textarea
列 cols
行 rows

隐藏域

<body>
<form action="#" method="get">
    <!--
        隐藏域
        hidden 将输入框进行隐藏
    -->
    <input type="text" name="user" value="aaa">
    <input type="hidden" name="u" value="bbb">
    <input type="submit">
</form>

只读、禁用和提示框：

<form action="#" method="get">
    <!--
        只读
        readonly  输入框中的内容无法进行修改
    -->
    <input type="text" name="user" value="lisi" readonly>
</form>
<form action="#" method="get">
    <!--
        禁用
        disabled  按钮灰色无法进行提交
    -->
    <input type="submit" disabled>
</form>
<form action="#" method="get">
    <!--
        placeholder 起到提示作用
   -->
    <label for="user">用户名:</label>
    <input type="text" name="user" id="user" placeholder="请输入用户名">
</form>

获取焦点

<body>
<form action="#" method="get">
    <!--
        获取焦点
        点击用户名时，光标定位在文本框中
        在label中用for属性绑定input中的id对应的属性值
    -->
    <label for="use">用户名</label>
    <input type="text" name="user" id="use">
</form>
</body>

必填项（非空验证）

<body>
    <form action="#" method="get">
        <!--
            required 必填项
       -->
        <label for="user">用户名:</label>
        <input type="text" name="user" id="user" required>
        <input type="submit">
    </form>

</body>