使用html表单制作简单网页（加表单详细知识点）

编程知识行业动态更新时间:2024-06-13 00:17:52

表单也是html非常重要的一块，常用于输入信息，进行信息的收集和提交

属性：

action：信息提交地址

method：提交方式

get	信息拼接在地址中，不安全
post	信息打包发送，安全

select：下拉菜单

option：下拉菜单中的选项

textarea：多行文本域可以加样式resize：none取消调整大小

input：

标签<input type=" " name=" " value=“ ”>

type:

text文本框：出现文本框 placeholder：输入框的提示文本

password密码框

radio单选框

checkbox复选框

button按钮

submit提交:将输入的信息提交的指定地址

reset重置

fle选择文件

hidden隐藏

value:

代表input所对应的值

name：

提交的关键词

注意：type name value使用空格隔开

title提示文本

实现提交表单时输入的不是 3 位数的数字时提示`请输入三位数字`

<form action="/example/html5/demo_form.asp">
密号：<input type="text" name="country_code" pattern="[0-9]{3}" ________="请输入三位数字" />
<input type="submit" />
</form>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: max-content;
            height: max-content;
            margin:200px auto;
        background-image:url("../download.jpg");}
    </style>
</head>
<body><div>
<form action="https://blog.csdn/weixin_54107527?type=blog">
    <h1>海绵hong道友注册网</h1>
    <input type="text" name="name" placeholder="请输入姓名"><br>
    <input type="text" name="email" placeholder="请输入邮箱" ><br>
    <input type="password" name="pwd" placeholder="请输入密码" ><br>
    <h3>请选择性别</h3>
    男神<input type="radio" name="sex">
    女神<input type="radio" name="sex"><br>
    <h3>喜欢语言</h3>
    java<input type="checkbox" name="hobby" value="java">
    python<input type="checkbox" name="hobby" vallue="python">
    js<input type="checkbox" name="hobby" vallue="js">
    c++<input type="checkbox" name="hobby" vallue="c++">
    c#<input type="checkbox" name="hobby" vallue="c#">
    VB<input type="checkbox" name="hobby" vallue="VB">
    PHP<input type="checkbox" name="hobby" vallue="PHP">
    其他<input type="checkbox" name="hobby" vallue="其他"><br>
    国家<select name="guo" >
        <option value="中国">中国</option>
        <option value="巴基斯坦">巴基斯坦</option>
        <option value="俄国">俄国</option>
    留言表<textarea name="liu" placeholder="对作者的意见"></textarea>
    </select>
    <input type="reset">
    <input type="submit">
</form>
</div>
</body>
</html>

更多推荐

使用html表单制作简单网页（加表单详细知识点）

本文发布于:2023-03-25 22:43:00，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/ff635f247d8a13b4ecc478d6cd2baa1c.html