HTML标签(表单标签,列表标签,无语义标签)

原创已于 2024-09-17 13:31:08 修改 · 442 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

于 2024-09-05 21:14:26 首次发布

1.表单标签

让用户输入信息的重要途径,完成服务器的一次交互

描述了要把数据按照什么方式,提交到那个页面中

input标签:

type:取值种类多,button(按钮),checkbox(复选框),text(文本框),password(密码框),radio(单选框),submit(提交按钮),reset(清空按钮重置),file(选择文件)...

name:给input起了个名字(单选框之间必须具备相同的name才能实现多选一的效果)

value:input中默认的值

placeholder:主要用于提供输入框的提示信息，帮助用户了解应该在输入框中输入什么内容,

设置一个灰色的提示文字。这种提示信息通常用于指导用户正确填写表单，比如提示用户名应该输入的位置或格式。

当用户开始在输入框中键入内容时，这个提示信息会自动消失，以便于用户看到自己输入的实际内容。如果用户清空输入框，提示信息会再次出现，以此循环。这一特性极大地改善了用户体验，因为它减少了用户对额外说明的需求，并使得界面更为简洁明了。

checked:用于单选按钮和多选按钮默认被选中的值

maxlength:设定的最大长度

label标签:搭配input使用

for属性指定当前label和那个相同id的input标签输入框对应,点击label,也能选中对应的输入框

select标签:下拉菜单

option中定义selected="selected"表示默认选中,通常第一个选项是默认选项

textarea标签:文本域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <form action="">
        <table>
            <caption>教学信息反馈表</caption>
            <tr>
               
                <td>姓名:<input id="name" type="text" ></td>
            </tr>
            <tr>
              
                <td>性别:<input type="radio" name="sex">男
                    <input type="radio" name="sex">女
                </td>
                
            </tr>
            <tr>
               
                <td>专业:<input type="text"></td>
            </tr>
       
            <tr>
                <td>您认为本学期开设的课程:</td>
                <td><input type="radio" name="i" >合理
                <input type="radio" name="i">一般
                <input type="radio" name="i">不合理
                </td>
            </tr>
            <tr>
                <td>您喜欢的课程有:</td>
                <td><input type="checkbox">html
                <input type="checkbox">基础
                <input type="checkbox">Photoshop
                </td>
            </tr>
            <tr>
                <td>您对课程安排的宝贵意见: <select name="" id="">
                    <option value="">无意见</option>
                    <option value="">有意见</option>
                </select></td>
                
            </tr>
            <tr>
                <td><textarea name="" id="" cols="30" rows="10"></textarea></td>
            </tr>
            <tr>
                <td ><input type="submit"> <input type="reset"></td>

             
            </tr>
    </table>
</form>
</body>
</html>