学习HTML制作表单

提桶跑 桂林理工大学 2021-11-24 21:43:52
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method:post,get  提交方式
get方式可以在url中看到账号密码,提交不安全,但是高效
post提交相对安全,可以提交大文件
-->
<!--<form action="HTML.html" method="get">-->
<!--<form action="" method="post">
    &lt;!&ndash;文本输入框:input type="text"&ndash;&gt;
    <p>名字: <input type="text" name="username"> </p>
    &lt;!&ndash;密码框:input type="password"&ndash;&gt;
    <p>密码: <input type="password" name="pwd"> </p>

    <p>
        <input type="submit">&lt;!&ndash;提交&ndash;&gt;
        <input type="reset">&lt;!&ndash;重置&ndash;&gt;
    </p>
 value="请输入名字":默认初始值
  maxlength="4" :最多能输入多少个字符
  size="10":文本框长度
</form>-->

<form action="test.html" method="get">

    <!--文本输入框:input type="text",hidden:隐藏-->
    <p>名字: <input type="text" name="username" hidden> </p>

    <!--表单初级验证1.placeholder:提示信息   2.required:不能为空-->
    <p>账号:<input type="text" name="id" placeholder="请输入数字账号" required></p>

    <!--密码框:input type="password",readonly:只能读不能写-->
    <p>密码: <input type="password" name="pwd" value="现在只能读不能写" readonly></p>

    <!--单选框标签:input type="radio",value="":单选框的值,name="":表示组-->
    <p>性别:
        <input type="radio" value="boy" name="sex" required>男
        <input type="radio" value="girl" name="sex" required>女
    </p>

    <!--
    input type="checkbox":多选框标签
    checked:默认选中
    -->
    <p>爱好:
        <input type="checkbox" value="sleep" name="like" checked >睡觉
        <input type="checkbox" value="sing" name="like" >唱歌
        <input type="checkbox" value="playGames" name="like" >打游戏
    </p>



    <!--input type="button":普通按钮
        input type="image":图片按钮(点击提交到表单提交的位置)
    -->
    <p>按钮:
        <input type="button" name="dd" value="点击这里">
        <input type="image"  src="../img\0e275a4acf15273bab2eb6db2939a300_482x264.jpg" width="100px" height="50px" >
    </p>
    
    <!--1.下拉框,列表框:select      2.selected:默认选中-->
<p>国家:
    <select name="列表名称" >
        <option value="china" >中国</option>
        <option value="india">印度</option>
        <option value="usa" selected>美国</option>
    </select>
</p>

<!--1.文本域:textarea    2.name:里面填英文,避免乱码问题-->
<p>反馈:
    <textarea name="textarea"  cols="30" rows="10" placeholder="请输入您的宝贵意见" required></textarea>
</p>

    <!--input type="file":文件域-->
<p>
    <input type="file" name="files">
    <input type="button" value="点击上传" name="upload">
</p>

    <!--pattern:正则表达式-->
<p>邮箱:
    <input type="email" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" >
</p>

<p>URL:
    <input type="url" name="url" >
</p>

    <!--step:一次增加的值-->
<p>数字:
    <input type="number" name="number" max="100" min="0" step="10" >
</p>

<!--滑块,调节音量:input type="range"
step="10":每次调节的范围
-->
<p>音量:
    <input type="range" name="voice" min="0" max="100" step="10">
</p>

<p>搜索框:
    <input type="search" id="dd" name="search">
</p>

    <p>
        <!--label:增强鼠标的可用性-->
        <label for="dd">点击我会调到id=""标记的文本框</label>
    </p>
    <p>
        <br>
        <input type="submit"><!--提交-->
        <input type="reset"><!--重置-->

        <!--input type="reset":清空表单属性
        value="":可以给表单赋值,相当于给个表单名字
        disabled:禁用该按钮
        -->
        <input type="reset" value="清空表单" disabled>
    </p>

    <!--表单初级验证1.placeholder:提示信息    2.required:不能为空     3.pattern:正则表达式-->
</form>
</body>
</html>

 

...全文
6 9 收藏 1
写回复
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
1_Lina 新手村气氛调节师 3天前

这么常的代码
666!!!

回复
相关推荐
发帖
编程新手村
创建于2021-11-01

6.5w+

社区成员

灌水发信息每周送书 灌水发干货每周送惊喜 谁最水过年送大礼 谁最硬核过年送大礼 谁最贡献过年送大礼
帖子事件
创建了帖子
2021-11-24 21:43
社区公告

我们“新手村”社区就是大家的孵化器

你们学习,我来评分

每周最高分送一本书

每月第四周送一份机械键盘

咱们新手村使用一切狂暴手段让优秀的人得到奖励