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

海绵hong

已于 2022-05-03 16:50:34 修改

阅读量4.3k

点赞数 8

分类专栏：前端文章标签： html5 css

于 2022-04-01 10:41:08 首次发布

本文链接：https://blog.csdn.net/weixin_54107527/article/details/123891942

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

表单也是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.net/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>

海绵hong

关注

8
点赞
踩
51

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用html表单制作简单网页（加表单详细知识点）

表单也是html非常重要的一块，常用于输入信息，进行信息的收集和提交属性：action：信息提交地址method：提交方式 get 信息拼接在地址中，不安全 post 信息打包发送，安全 select：下拉菜单option：下拉菜单中的选项textarea：多行文本域可以加样式resize：none取消调整大小input：标签<input type=" " name=" ...
复制链接

扫一扫