HTML基础：form表单标签的简单应用

BestKagome

已于 2023-05-29 14:27:25 修改

阅读量55

点赞数

分类专栏： Html 文章标签： c# html

于 2022-06-30 09:55:24 首次发布

本文链接：https://blog.csdn.net/Alley_Olive/article/details/125525235

版权

Html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>
<body>
    <!--
        表单标签侧重于向后端发送数据，
        主要以input文本标签为主，辅之以name属性，通过form表单向后端传送数据，
        除了input标签外，还有大文本标签textarea、下拉菜单标签select，
        input文本标签属性：
        type：text、count、date、button、radio、checkbox、hidden、submit、reset等。
        name：name设置的值必须要和后端接收前端数据的参数名称一致。
        value：显示在页面上的值，hidden类型的除外。
    -->
    <form action="https://www.baidu.com/s" method="get">
        输入关键字：<br>  <!-- placeholder属性：描述文本区域预期值的简短提示 -->
        <input type="text" name="keywords" autocomplete="off" id="" placeholder="关键字"><br>
        人数：<br>
        <input type="number" name="studentCount" id="" value=""><br>
        选择日期：<br>
        <input type="date" name="chooseDate" id=""><br>
        性别：<br>  <!-- checked属性：默认选中某一个radio -->
        <input type="radio" name="sex" id="male" value="boy" checked>男
        <input type="radio" name="sex" id="female" value="girl">女<br>
        兴趣爱好：<br>  <!-- checked属性：默认选中某一个checkbox -->
        <input type="checkbox" name="interest" id="" value="football" checked>足球
        <input type="checkbox" name="interest" id="" value="basketball">篮球
        <input type="checkbox" name="interest" id="" value="volleyball">排球
        <input type="checkbox" name="interest" id="" value="tableTennis">乒乓球<br>
        <input type="hidden" name="hidVal" value="secret">
        选择班级：<br>
        <select name="selClass" id="">
            <option name="optClass1" value="1">一班</option>
            <option name="optClass2" value="2">二班</option>
            <option name="optClass3" value="3">三班</option>
        </select>
        <br>备注：<br>  <!-- readonly属性：设置成只读，注意：textarea文本框中的placeholder属性并不起作用 -->
        <textarea name="txtNotes" id="" cols="30" rows="10" placeholder="在这里输入备注" readonly>
            
        </textarea>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
</body>
</html>

在Google Chrome浏览器中的预览效果：