form表单

Demo 01:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>form表单</title>
    <style>

    </style>
</head>

<body>
    <!--表单:用于将本地的数据提交到远程的服务器
        使用form标签创建一个表单
        
        action属性:表单要提交的服务器地址
    -->
    <form action="target.html" target="_blank">

        <!--注意: 
        数据要提交到服务器中,必须要为元素提供一个name属性   
    -->
        <!--文本框 -->
        用户名: <input type="text" name="username"> <br><br>
        <!--密码框 -->
        密码: <input type="password" name="password"><br><br>

        <!--
     单选按钮:
        像这种选择框,必须指定一个value属性,value表示要提交给服务器的数据
        name属性值进行分组

        checked="checked" 键值对设置默认选中项

    -->
        性别: <input type="radio" name="gender" value="male" checked="checked">
        <input type="radio" name="gender" value="female"><br><br>

        <!--复选框 
        value:提交到服务器端的值
    -->
        爱好:
        篮球 <input type="checkbox" name="hobby" value="1" checked="checked">
        足球<input type="checkbox" name="hobby" value="2">
        排球 <input type="checkbox" name="hobby" value="3">
        乒乓球<input type="checkbox" name="hobby" value="4">
        橄榄球 <input type="checkbox" name="hobby" value="5">
        <br><br>
        <!--select:下拉列表
         option子元素:
         selected="selected" 设置默认选中项
            
        -->
        所在城市:
        <select name="currentCity" id="currentCity">
            <option value="0">南京</option>
            <option value="1" selected="selected">苏州</option>
            <option value="2">无锡</option>
            <option value="3">徐州</option>
            <option value="4">扬州</option>
            <option value="5">南通</option>
        </select>
        <br><br>
        自我介绍:
        <textarea name="selfIntroduction" id="selfIntroduction" cols="30" rows="10"></textarea>
        <br><br>
        <!--重置按钮:将表单数据回滚到最初状态 -->
        <input type="reset" value="重置">
        <!--表单提交按钮:触发表单提交 -->
        <input type="submit" value="提交"> 
    </form>
</body>
</html>

Demo 02:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--target属性 -->
    <form action="target.html">
            <!-- value属性可以为text或者password框设置默认值 \
            autocomplete:设置自动补全功能
            on:开启
            off:关闭

            readonly属性:设置元素为只读,数据可以被提交到服务器
            readonly="readonly"(也可以直接添加readonly属性)

            disabled属性:禁用元素,数据不会被提交到服务器

            autofocus属性:设置元素的聚焦
            -->
            <!-- 用户名: <input type="text" name="username" autocomplete="off"><br><br> -->
            用户名: <input type="text" name="username" autocomplete="off"><br><br>
            资历:<input type="text" name="zili" autofocus="autofocus"><br><br>
            <input type="text" name="word" value="youarebest" disabled="disabled"><br><br>
            密码: <input type="password" name="password" value="656565"><br><br>

            <!--普通按钮 -->
             <input type="button" value="按钮">
            <!--重置和提交按钮 -->
            <input type="reset" value="重置">
            <input type="submit" value="提交">

    </form>
</body>
</html>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值