14-HTML学习-表单
  TEZNKK3IfmPf 2023年11月14日 80 0

就是数据表规范

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <!-- 
        表单 在网页中, 用于搜集用户信息,将用户信息提交给后台服务器
        一个表单由三个部分组成, 表单域,表单控件,提示信息
        

        表单域
            form 创建表单域
            action 用以提交到后台服务器地址

        表单控件
            表单元素 用以搜集信息的控件
            input 关于输入信息的控件
                type 属性 用于指定输入控件的类型,
                name 属性 设置控件的名字(后台可以通过名字获取对应控件提交的值)
                value 属性 设置对应控件的值
                checked 属性 设置默认选中状态,单选框和复选框使用 checked="checked"

            select 下拉列表
                select 标签中包含一个个的option 列表项
                selected="selected" 设置默认选中状态, option标签下

                optgroup label 给下拉列表分组
            
            textarea 文本域



        提示信息
            label 标签 用于选中表单中的提示文字


     -->

     <!-- 表单域 -->
     <form action="./13表格标签.html">
        <!-- 文本框 -->
        <label for="us">用户名:</label>
        <input type="text" id="us" name="username" value="">
        <br><br>
        <!-- 密码框 -->
        密码:<input type="password" name="password">
        <br><br>

        <!-- 单选框 ,并且name值得一样,否则不能起到单选的功能-->
        性别:
        <input id="nan" type="radio" name="gender" value="male"> 
        <label for="nan">男</label> 
        <input type="radio" name="gender" value="female"> 女
        <br><br>

        <!-- 复选框 -->
        你喜欢的老师:
        <input type="checkbox" name="teacher" value="cls" checked>陈老师
        <input type="checkbox" name="teacher" value="tls" >唐老师
        <input type="checkbox" name="teacher" value="zls" checked>朱老师

        <br><br>
        <!-- 下拉列表 -->
        <!-- name属性为select指定,value为option指定 -->
        籍贯:
        <select name="city" id="">
            <optgroup label="北方">
                <option value="beijing">北京</option>
            </optgroup>
            <optgroup label="南方">
                <option value="shenzheng" selected>深圳</option>
                <option value="shanghai">上海</option>
            </optgroup>
            
        </select>

        <!-- 文本域 -->
        <!-- 文本域没有value属性 -->
        自我介绍
        <textarea name="self" id="" cols="30" rows="10">请输入自我介绍</textarea>

        <br><br>
        <!-- 提交按钮 -->
        <input type="submit">
        <input type="submit" value="注册">
        <br><br>
        <!-- 重置按钮 -->
        <input type="reset">
        <!-- 普通按钮 -->
        <input type="button" value="普通按钮">
        <br><br><br>
        <!-- 创建的方式2,更加灵活,双标签 -->
        <button type="submit">注册</button>
        <button type="reset">重置</button>
        <button type="button">普通按钮</button>
        
     </form>
</body>
</html>
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月14日 0

暂无评论

推荐阅读
  TEZNKK3IfmPf   2024年03月30日   50   0   0 htmlhtml5
  TEZNKK3IfmPf   2024年04月26日   36   0   0 htmlScala
  TEZNKK3IfmPf   2024年03月29日   51   0   0 htmlhtml5
  TEZNKK3IfmPf   2024年03月29日   92   0   0 htmlhtml5
  TEZNKK3IfmPf   2024年03月29日   54   0   0 htmlhtml5
  TEZNKK3IfmPf   2024年03月29日   53   0   0 htmljQuery
  TEZNKK3IfmPf   2024年05月31日   31   0   0 表单
TEZNKK3IfmPf