前端零基础学习Day-Three

ZIM学编程

于 2024-05-16 00:41:47 发布

阅读量631

点赞数 23

分类专栏：前端学习文章标签：前端学习

本文链接：https://blog.csdn.net/2301_79896868/article/details/138929454

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML表单

<!--语法：-->
<form>
    表单元素
</form>

表单本身不可见，可见的是表单元素

表单元素：

<input>	表单输入标签
<select>	菜单和列表标签
<option>	菜单和列表项目标签
<textarea>	文字域标签
<optgroup>	菜单和列表项目分组标签

<input>标签（单标签）：

type属性值	描述
text	文字域
password	密码域
file	文件域
checkbox	复选域
radio	单选域
Button	按钮
Submit	提交按钮
Reset	重置按钮
Hidden	隐藏域
image	图像域

单行文本域属性：

属性	描述
name	文字域的名称
maxlength	指用户输入的最大字符长度
size	指定文本框的宽度，以字符个数为单位；文本框的缺省宽度是20个字符
value	指定文本框的默认值
placeholder	规定用户填写输入字段的提示

图像域（图像提交按钮）：

隐藏域：

下拉菜单和列表：

<select>
    <option value="...">选项</option>
    <option value="...">选项</option>
</select>

<select>标签属性：

name	设置下拉菜单和列表的名称
multiple	设置可选择多个选项
size	设置列表中可见选项的数目

<option>标签属性：

selected	设置选项初始选中状态
value	定义送往服务器的选项值

分组下拉菜单和列表标签：

<select name="">
    <optgroup label="组1">
    <option value="...">选项</option>
    <option value="...">选项</option>
    ......
    </optgroup>
    <optgroup label="组2">
    <option value="...">选项</option>
    <option value="...">选项</option>
    ......
    </optgroup>
</select>

多行文本域：

<textarea name=".." rows=".." cols=".." ...>
    内容......
</textarea>

多行文本域属性值

name	设置文本区的名称
placeholder	设置描述文本区域预期值的简短提示
rows	设置文本区内的可见行数
cols	设置文本区内的可见宽度

表单案例：

<!DOCTYPE html>
<html>
    <head>
        <title>表单</title>
    </head>
    <body>
        <h1 align="center">注册信息</h1>
        <hr color="336699"/>
        <form>
            <table width="600px" bgcolor="f2f2f2" align="center">
                <tr>
                    <td align="right">姓名：</td>
                    <td align="left"><input type="text" name="username" size="25" maxlength="6" placeholder="请输入姓名"/></td>
                </tr>
                <tr>
                    <td align="right">邮箱：</td>
                    <td align="left"><input type="text" name="email" value="@163.com"/></td>
                </tr>
                <tr>
                    <td align="right">密码：</td>
                    <td align="left"><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码"/></td>
                </tr>
                <tr>
                    <td align="right">确认密码：</td>
                    <td align="left"><input type="password" name="paw_confirm" size="25" maxlength="6" placeholder="请再输入密码"/></td>
                </tr>
                <tr>
                    <td align="right">上传照片：</td>
                    <td align="left"><input type="file"/></td>
                </tr>
                <tr>
                    <td align="right">性别：</td>
                    <td align="left">男<input type="radio" name="sex" value="man" checked/>
                        女<input type="radio" name="sex" value="woman"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">爱好：</td>
                    <td align="left">读书：<input type="checkbox" name="dx1" value="read" checked/>
                        跳舞：<input type="checkbox" name="dx1" value="dance"/>
                        唱歌：<input type="checkbox" name="dx1" value="sing"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">城市：</td>
                    <td align="left">
                        <select name="city">
                            <option value="xz" selected>--请选择--</option>
                            <option value="beijing">北京</option>
                            <option value="tianjin">天津</option>
                            <option value="hebei">河北</option>
                            <option value="shanghai">上海</option>
                            <option value="fujian">福建</option>
                            <option value="xiamen">厦门</option>
                            <option value="guangdong">广东</option>
                        </select>
                        <select name="city" size="5" multiple>
                            <option value="xz" selected>--请选择--</option>
                            <optgroup label="华北">
                            <option value="beijing" selected>北京</option>
                            <option value="tianjin">天津</option>
                            <option value="hebei">河北</option>
                            </optgroup>
                            <optgroup label="华东">
                            <option value="shanghai">上海</option>
                            <option value="fujian">福建</option>
                            <option value="xiamen">厦门</option>
                            <option value="guangdong">广东</option>
                            </optgroup>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">简介：</td>
                    <td align="left"><textarea name="jj" rows="6" cols="50" placeholder="请输入个人介绍"></textarea></td>
                </tr>
                <tr>
                    <td align="center" colspan="2"><input type="button" value="来点我" name="button"/>
                        <input type="submit" value="submit" name="submit"/>
                        <input type="reset" value="reset" name="reset"/>
                        <input type="image" name="image_button" src="image-button.png"/></td>
                </tr>
                <tr>
                    <td><input type="hidden" name="hidden" value="这是一个用户注册信息"/></td>
                    <td></td>
                </tr>
                
            </table>
        </form>
    </body>
</html>

<form>标签属性值：

属性	值	描述
action	URL	提交表单时向何处发送表单数据
method	get、post	设置表单以何种方式发送到指定页面
name	form_name	表单的名称
target	_blank、_self、_parent、_top	在何处打开action URL
enctype	1.application/x-www-form-urlencoded 2.multipart/form-data 3.text/plain	在发送表单数据之前如何对其进行编码