html之from表单


title: 前端之from表单
author: 千里
tags:

  • html
    categories:
  • html
    abbrlink: 2896
    date: 2023-02-28 18:23:00

前端之from表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
     姓名   <input  type="text">
     银行卡账户   <input  type="text">
     银行卡密码   <input  type="text">
    </form>
</body>
</html>

upload successful

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action=""  method="post">
    <p>姓名 <input type="text" name="ac"></p>
    <p>银行卡账户 <input type="text" name="user"></p>
    <p>银行卡密码 <input type="password" name="pwd"></p>
    <p>
        爱好:
        <input type="checkbox" name="hobby"  value="ikun">ikun
        <input type="checkbox" name="hobby"  value="lanqiu">篮球
  </p>
    <p><input type="submit"></p>
</form>
</body>
</html>

upload successful

type= radio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
    <p>姓名 <input type="text" name="ac"></p>
    <p>银行卡账户 <input type="text" name="user"></p>
    <p>银行卡密码 <input type="password" name="pwd"></p>
    <p>
        爱好:
        <input type="checkbox" name="hobby" value="ikun">ikun
        <input type="checkbox" name="hobby" value="lanqiu">篮球
        <!键值一样可以发多个 >
    </p>
    <p>
        性别:
        <input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="0">女
        <!键值一样只能发一个 >
    </p>
    <p><input type="submit"></p>
</form>
</body>
</html>

upload successful

date

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
    <p>姓名 <input type="text" name="ac"></p>
    <p>银行卡账户 <input type="text" name="user"></p>
    <p>银行卡密码 <input type="password" name="pwd"></p>
    <p>
        爱好:
        <input type="checkbox" name="hobby" value="ikun">ikun
        <input type="checkbox" name="hobby" value="lanqiu">篮球
        <!键值一样可以发多个 >
    </p>
    <p>
        性别:
        <input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="0">女
        <!键值一样只能发一个 >
    </p>
    <p>
        生日:
        <input type="date" name="birth" value="9999-12-29">
    </p>
    <p><input type="submit"></p>
</form>
</body>
</html>

upload successful

弹窗代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
    <p>姓名 <input type="text" name="ac"></p>
    <p>银行卡账户 <input type="text" name="user"></p>
    <p>银行卡密码 <input type="password" name="pwd"></p>
    <p>
        爱好:
        <input type="checkbox" name="hobby" value="ikun">ikun
        <input type="checkbox" name="hobby" value="lanqiu">篮球
        <!键值一样可以发多个 >
    </p>
    <p>
        性别:
        <input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="0">女
        <!键值一样只能发一个 >
    </p>
    <p>
        生日:
        <input type="date" name="birth" value="9999-12-29">
    </p>
    <p>
        <input type="button" value="button"  onclick="alert(666)">
    </p>
    <p><input type="submit"></p>
</form>
</body>
</html>

upload successful

表单筛选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
    <p>姓名 <input type="text" name="ac"></p>
    <p>银行卡账户 <input type="text" name="user"></p>
    <p>银行卡密码 <input type="password" name="pwd"></p>
    <p>
        爱好:
        <input type="checkbox" name="hobby" value="ikun">ikun
        <input type="checkbox" name="hobby" value="lanqiu">篮球
        <!键值一样可以发多个 >
    </p>
    <p>
        性别:
        <input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="0">女
        <!键值一样只能发一个 >
    </p>
    <p>
        生日:
        <input type="date" name="birth" value="9999-12-29">
    </p>
    <p>
        <input type="button" value="button"  onclick="alert(666)">
    </p>
    <p>
        <select name="province" >
            <option value="hebei">河北省</option>
            <option value="henan">河南省</option>
            <option value="shanxi">山西省</option>
            <option value="shandong">山东省</option>
        </select>
    </p>
    <p><input type="submit"></p>
</form>
</body>
</html>

upload successful

文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
    <p>姓名 <input type="text" name="ac"></p>
    <p>银行卡账户 <input type="text" name="user"></p>
    <p>银行卡密码 <input type="password" name="pwd"></p>
    <p>
        爱好:
        <input type="checkbox" name="hobby" value="ikun">ikun
        <input type="checkbox" name="hobby" value="lanqiu">篮球
        <!键值一样可以发多个 >
    </p>
    <p>
        性别:
        <input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="0">女
        <!键值一样只能发一个 >
    </p>
    <p>
        生日:
        <input type="date" name="birth" value="9999-12-29">
    </p>
    <p>
        <input type="button" value="button"  onclick="alert(666)">
    </p>
    <p>
        <select name="province" >
            <option value="hebei">河北省</option>
            <option value="henan">河南省</option>
            <option value="shanxi">山西省</option>
            <option value="shandong">山东省</option>
        </select>
    </p>
    <p>
        <textarea name="jianjie" cols="30" rows="10" > </textarea>
    </p>
    <p><input type="submit"></p>
</form>
</body>
</html>

upload successful

<p>姓名 <input type="text" name="ac" placeholder="请输入姓名"></p>

upload successful

 # checked 默认选中
<input type="checkbox" name="hobby" value="ikun"  checked>ikun

upload successful

 # 下拉菜单默认选择
<option value="shanxi" selected>山西省</option>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
    <p>姓名 <input type="text" name="ac" placeholder="请输入姓名"></p>
    <p>银行卡账户 <input type="text" name="user"></p>
    <p>银行卡密码 <input type="password" name="pwd"></p>
    <p>
        爱好:
        <input type="checkbox" name="hobby" value="ikun"  checked>ikun
        <input type="checkbox" name="hobby" value="lanqiu">篮球
        <!键值一样可以发多个 >
    </p>
    <p>
        性别:
        <input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="0">女
        <!键值一样只能发一个 >
    </p>
    <p>
        生日:
        <input type="date" name="birth" value="9999-12-29">
    </p>
    <p>
        <input type="button" value="button"  onclick="alert(666)">
    </p>
    <p>
        <select name="province" >
            <option value="hebei" >河北省</option>
            <option value="henan">河南省</option>
            <option value="shanxi" selected>山西省</option>
            <option value="shandong">山东省</option>
        </select>
    </p>
    <p>
        <textarea name="jianjie" cols="30" rows="10" > </textarea>
    </p>
    <p><input type="submit"></p>
</form>
</body>
</html>

Author: 千里
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint policy. If reproduced, please indicate source 千里 !
  TOC