HTML+CSS培训教案（十六）

最新推荐文章于 2023-11-11 11:41:08 发布

红壶吃猬队

最新推荐文章于 2023-11-11 11:41:08 发布

阅读量252

点赞数 1

分类专栏： HTML/CSS HTML+CSS培训教案文章标签： HTML CSS 教程

本文链接：https://blog.csdn.net/chenmiaoqin950606/article/details/92428632

版权

HTML/CSS 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

HTML+CSS培训教案

16 篇文章 1 订阅

订阅专栏

三十六、表单

代码

<html>
    <head>
        <meta content="text/html;charset=utf-8">
        <title>美化表格</title>
        <style>
        </style>
    </head>
    <body>
        <form action="" method="POST">
            <p>请输入您的姓名：<input type="text" name="name" id="name"></p>
            <p>请输入您的密码：<input type="password" name="password" id="password" placeholder="不修改请保持该项为空"></p>
            <p>请选择你最喜欢的颜色：<select name="color" id="color">
                <option value="red">红</option>
                <option value="green">绿</option>
                <option value="blue">蓝</option>
                <option value="yellow">黄</option>
                <option value="cyan">青</option>
                <option value="purple">紫</option>
            </select></p>
            <p>请问你的性别：<br>
                <input type="raido" name="sex" value="male">男
                <input type="raido" name="sex" value="female">女
            </p>
            <p>你喜欢做什么<br>
                <input type="checkbox" name="hobby" value="book">看书
                <input type="checkbox" name="hobby" value="net">上网
                <input type="checkbox" name="hobby" value="sleep">睡觉
            </p>
            <p>我要留言：<br>
                <textarea name="comments" id="comments" cols="30" rows="4"></textarea>
            </p>
            <p><input type="submit" name="submit" id="submit" value="提交"></p>
        </form>
    </body>
<html>

知识点

<form></form>表单标记

action：提交路径

method：提交方式，值：get（提交数据可见）/post（提交数据不可见）
<input>输入标记

type：输入类型

name：名称

value：默认值

placeholder提示输入文本，有值时不显示

readonly=“readonly” 只读，不可修改
文本输入框：type=“text”（密码形态：type=“password”）
单选按钮：type=“radio”，一组单选按钮的name值一样

checked="checked"默认选中（一组只能有一个被选中）
复选按钮：type=“checkbox”，一组单选按钮的name值一样

checked="checked"默认选中（一组可以有多个被选中）
按钮：type=“button”（h5中推荐使用<button></button>标记）

（提交形态：type=“submit”）提交表单

（重置形态：type=“reset”）重置表单

此时value为按钮上文字
文件：type=“file”，提交文件
隐藏字段：type=“hidden”，隐藏状态，但会在提交时传值，故用来设置默认提交项
<select></select>下拉列表标记

size：最大可显示数，超出后有滚动条
<option></option>列表选项标记，嵌套于<select></select>中

option值无value属性时，value默认为标记中文本
<textarea></textarea>多行文本框标记

rows：最大可显示行数

cols：最大可显示列数
H5中<input>新增type：color/date/number/range…

http://www.imooc.com/wiki/detail/id/993

红壶吃猬队

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS培训教案（十六）

三十六、表单代码<html> <head> <meta content="text/html;charset=utf-8"> <title>美化表格</title> <style> </style> </head> ...
复制链接

扫一扫

专栏目录