表单form的运用

VIP文章咩Kakao

已于 2022-08-16 20:37:49 修改

阅读量57

点赞数

分类专栏： HTML 文章标签：服务器安全 github

于 2022-08-16 20:18:09 首次发布

本文链接：https://blog.csdn.net/weixin_52142992/article/details/126373603

版权

<!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>Document</title>
</head>
<body>
    <!-- 表单属性：placeholder（占位符）、value、disable（禁用元素）、readonly（文本只读）、autofocus（自动获得焦点）、name、maxlength（最大长度）-->
    <form action="">
        <p>
            用户名：<input type="text" name="" id="" placeholder="请输入用户名" disabled>
            用户名：<input type="text" name="" id="" placeholder="请输入用户名" readonly>
            用户名：<input type="text" name="" id="" placeholder="请输入用户名" autofocus>
            用户名：<input type="text" name="" id="" placeholder="请输入用户名" maxlength="11">
        </p>
        <p>
            密码：<input type="password" name="" id="">
        </p>
        <!-- label：定义checkbox、radio元素的标注；for规定与哪个元素绑定 -->
        <p>
            爱好：
            <!-- 点击篮球和羽毛球也可以选定 -->
           <label for="basketball"> 篮球</label><input type="checkbox" name="" id="basketball">
           <label for="badminton"> 羽毛球</label><input type="checkbox" name="" id="badminton">
            足球<input type="checkbox" name="" id="">
            乒乓球<input type="checkbox" name="" id="">
        </p>
        <p>
            性别：
            男<input type="radio" name="gender" id="">
            女<input type="radio" name="gender" id="">
        </p>
        <p>
            <input type="file" name="" id="">
        </p>
        <p>
            <!-- 重置按钮只能在表单里面才有效果 -->
            <input type="reset" value="重置">
            <input type="submit" value="提交">
        </p>
    </form>
    <button>点击</button>
    <!-- 文本域属性：readonly、disable、name、row -->
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <select name="" id