HTML之表单

最新推荐文章于 2024-08-17 14:58:02 发布

EddySD

最新推荐文章于 2024-08-17 14:58:02 发布

阅读量547

点赞数 14

文章标签： html android 前端

本文链接：https://blog.csdn.net/EddySD/article/details/140531849

版权

表单的作用是收集信息

1.表单域

<form action="1.php" method="get"></form>

属性：action 处理信息

method=”get | post“

get通过地址栏提供（传输信息），安全性差

post通过1.php来处理信息，安全性高

2.文本输入框

<!-- 文本输入框 -->
用户名：<input type="text" maxlength="6" read="readonly" 
disabled="disabled" name="username" value="前端">

maxlength="6" 限制输入字符长度

readonly="readonly" 将输入狂设置为只读状态（不能编辑）

disabled=”disabled“ 输入框未激活状态

name=”username“ 输入框的名称

value=”前端“ 将输入框的内容传给处理文件

3.密码输入框

<!-- 密码输入框 -->
密码：<input type="password" name="pwd">

注意：文本输入框的所有属性对密码输入框都有效

4.单选框

<!-- 单选框 -->
<input type="radio" name="gender" checked="checked">男

只有将name的值设置相同的时候，才能实现单选效果

checked=”checked“ 设置默认选择项

5.下拉列表

<select multipe="multiple">
    <option>下拉列表选项1</option>
    <option>下拉列表选项2</option>
    <option>下拉列表选项3</option>
    <option selected="selected">下拉列表选项4</option>
</select>

属性：

multiple=”multiple“ 将下拉列表设置为多选项

selected=”selected“ 设置默认选中项目

 <optgroup label="省份">
                <option value="">贵州</option>
                <option value="">河南</option>
                <option value="">黑龙江</option>
     </optgroup>

<optgroup></optgroup> 对下拉列表进行分组

label=” “ 分组名称

6.多选框

        唱<input type="checkbox" name="hobby" value="唱" checked>
        跳<input type="checkbox" name="hobby" value="跳">
        rap<input type="checkbox" name="hobby" value="rap">
        篮球<input type="checkbox" name="hobby" value="篮球">

checked 设置默认选中项

7.多行文本框

<!-- 多行文本框 -->
<textarea cols="130" rows="10"></textarea>

cols 控制输入字符的长度

rows 控制输入的行数

8.文件上传控件

<!-- 文件上传控件 -->
<input type="file">文件提交按钮

9.提交按钮

<!-- 文件提交按钮 -->
<input type="submit">

可以实现信息提交功能

10.普通按钮

<!-- 普通按钮 -->
<input type="button" value="普通按钮">

不能提交信息，配合js使用

11.图片按钮

<!-- 图片 -->
<input type="image" value="图片.jpg">

图片按钮可实现信息提交功能

提交按钮与图片按钮的区别:唯一的区别就是type=image的input提交方式会把按钮点击的位置坐标x,y提交过去。

12.重置按钮

<!-- 重置按钮 -->
<input type="reset">

将信息重置到默认状态

13.表单信息分组

<form action="1.php" method="post">
    <fieldset>
        <legend>    
            分组信息
        </legend>
    </fieldset>
</form>

对表单信息分组<fieldset></fieldset>
表单信息分组名称<legend></legend>

练习

<!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="" method="get">
        <!-- 
        fieldset 表单的分组 
        legend 分组信息名
        -->
        <fieldset>
            <legend>分组信息1</legend>
        用户名：<input type="text" name="username" maxlength="6" value="请输入文字" >
        <br>
       
        密码：<input type="password" name="password" >
        <br>
       
        性别：
        男<input type="radio" name="sex" checked>
        女<input type="radio" name="sex" >
        <br>
       
        爱好：
        唱<input type="checkbox" name="hobby" value="唱" checked>
        跳<input type="checkbox" name="hobby" value="跳">
        rap<input type="checkbox" name="hobby" value="rap">
        篮球<input type="checkbox" name="hobby" value="篮球">
       
        <br>
       
        <input type="file"><br>
        
        <input type="reset"><br>
        
        <input type="submit"><br>
        
        <input type="button" value="按钮" id=""><br>
        <button>按钮</button>
        
        <!-- <input type="image" src="./1.jpg"> -->

        <!-- select > option 下拉菜单 -->
        <!-- select > optgroup > option 包含分组信息的下拉菜单 -->
         
        <select name="" id="">
            <optgroup label="数字">
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
            </optgroup>
            <optgroup label="数字">
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
            </optgroup>
            <optgroup label="数字">
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
            </optgroup>
        </select>

        <!-- 多行文本输入框 
            cols 一行可以输入多少个字符
            rows 显示多少行
         -->  
        </fieldset>
       <legend>分组信息2</legend>
        <fieldset>

        <textarea name="" id="" cols="30" rows="10"></textarea>
        </fieldset>
        
    
    </form>

</body>
</html>

运行结果

EddySD

关注

14
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
HTML之表单

提交按钮与图片按钮的区别:唯一的区别就是type=image的input提交方式会把按钮点击的位置坐标x,y提交过去。multiple=”multiple“ 将下拉列表设置为多选项。selected=”selected“ 设置默认选中项目。value=”前端“ 将输入框的内容传给处理文件。name=”username“ 输入框的名称。对表单信息分组<fieldset></fieldset>checked=”checked“ 设置默认选择项。表单信息分组名称<legend></legend>
复制链接

扫一扫