HTML表单的编写

 时间:2026-02-14 13:53:07

1、打开PyCharm开发工具,创建‘form.html’文件,编写代码如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <form>        <input type="text">        <input type="submit">    </form></head><body></body></html>

这是一个最简单的表单,只有<form>标签包围才是表单

HTML表单的编写

2、点击右上角浏览器可以查看效果,input标签通过type属性,决定输出的样式

HTML表单的编写

3、丰富一下表单,指定提交位置form标签属性是action,method是提交方式,代码如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <form action="" method="post">        <input type="text">                    <input type="submit" value="提交查询">            <input type="reset" value="清空重置">                    </form></head><body></body></html>

HTML表单的编写

4、再添加单选按钮,注意单选是只有一个被选中,所以一定要有name属性代码如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <form action="" method="post">        <input type="text">                            <input type="radio" name="gender">男            <input type="radio" name="gender">女                            <input type="submit" value="提交查询">            <input type="reset" value="清空重置">            </form></head><body></body></html>

HTML表单的编写

5、在添加一组复选框,这个是可以多选的,代码如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <form action="" method="post">        <input type="text">                    <input type="radio" name="gender">男            <input type="radio" name="gender">女                            <input type="checkbox">a            <input type="checkbox">b                            <input type="submit" value="提交查询">            <input type="reset" value="清空重置">            </form></head><body></body></html

HTML表单的编写

6、再添加一个下拉框select,代码如下;

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <form action="" method="post">        <input type="text">                    <input type="radio" name="gender">男            <input type="radio" name="gender">女                            <input type="checkbox">a            <input type="checkbox">b                             <select name="s1" >                <option value="sz">深圳</option>                <option value="sh">上海</option>                <option value="sc">四川</option>             </select>                            <input type="submit" value="提交查询">            <input type="reset" value="清空重置">            </form></head><body></body></html>

HTML表单的编写

7、打开右上角浏览器可以查看效果,现在稍微有点意思了。

HTML表单的编写

  • 翻硕缩略词怎么背
  • Manjaro系统安装百度网盘
  • 男生话题,时髦好看的内裤盘点哪条值得买
  • 火遍全网的杭州特产,要尝一尝吗
  • 大学生如何维护自己的身心健康
  • 热门搜索
    法语我爱你怎么说 稠怎么读 手机卡顿怎么解决 水表怎么看 豆腐泡怎么做好吃 周岁怎么算 怎么开通手机银行 怎么才能 验孕试纸怎么用 血小板低怎么治疗