HTML表单_html单选二选一-CSDN博客

本文链接：https://blog.csdn.net/qq_33430421/article/details/89002825

第1章表单基础结构

表单介绍

用途是收集信息，用于接受用户输入的信息，当用户提交表单的时候会将信息传送给服务器，从而实现用户和web服务器的交互。

表单定义：使用<form></form>标签，只是一个区域，表单本身不可见。所有表单内容必须写在<form>内。

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

<input>标签语法： <input type="类型属性" name="名称"....../> 是一个单标签。

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

搭建表单页面结构

表单的表现形式可以使用表格，即在<form></form>内使用<table></table>。

第2章表单元素

input标签（文本域和文件域）

<input>标签的属性

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

input标签（单选框和复选框）

单选框语法为：<input type="radio" name="sex" value="man" checked />。

name：为了使单选框只能二选一，所以他们必须有一样的name值。

value：当我们选中相应的单选框的时候，点击提交之后，被选中的单选框的value值会提交到服务器，服务器根须value值就知道选择的是哪一项。

checked：默认选择这一项。

复选框语法为：<input type="checkbox" name="..." value="..." checked />。

复选框的name值不受限制，但是。value值同单选框。checked值同单选框。虽然复选框name的值可以不一样，但是在实际开发的过程中，同一组复选框设置成相同的name值。如果有多组复选框，服务器可以根据name值判断是哪一组复选框提交的数据。

input标签（按钮）

按钮语法：<input type="button" name="..." value="..." />，往往配合js脚本进行相关的处理。

<input type="submit" name="..." value="..." />，提交按钮。

<input type="reset" name="..." value="..." />，恢复成默认初始状态。

功能：激发提交表单的作用，。

value值可以改变按钮上的文字。

input标签（图像域和隐藏域）

图像域语法：<input type="image" name="..." src="图片路径" />，功能是提交，相当于在提交按钮上添加了一个图片。

隐藏域语法：<input type="hidden" name="..." value="..." />，功能是当有些信息不想让用户看到，但是又需要传递给服务器的时候，使用隐藏域。当点击提交按钮时value内的值会传给服务器。

select标签（下拉菜单和列表）

下拉菜单和列表语法：

<select> <option value="..." >选项</option> </select>，<select>表示下拉菜单和列表的开始，<option>代表每一项的内容。两个都是成对使用的标签。value仍然是提交给服务器的值。

<select>标签属性
属性	描述
name	设置下拉菜单和列表名称
multiple	设置成可以选择多个选项
size	设置下拉菜单列表中可以同时显示的选项的个数

如果想呈现下拉菜单的形式，那么size和multiple属性就不要使用。如果想呈现列表的形式，就要使用size。

<option>标签属性
属性	描述
selected	设置选项初始选中状态
value	定义送给服务器的选项值

select标签（分组下拉菜单和列表）

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

    <form>
        <select name="...." >
            <option>请选择：</option>
            <optgroup label="...">
                <option value="...">...</option>
                <option value="...">...</option>
                <option value="...">...</option>
            </optgroup>
            <optgroup label="...">
                <option value="...">...</option>
                <option value="...">...</option>
                <option value="...">...</option>
            </optgroup>
        </select>
    </form>

textarea（多行文本域）

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

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

第3章表单页面调整

表单属性

表单工作原理：访问一个包含表单的页面，输入数据后“提交”表单，浏览器将用户在表单中输入的数据进行打包，并发送给服务器，服务器接收数据并转由程序处理。

<form>标签属性
属性	值	描述
action	URL	提交表单时向何处发送表单数据
method	get、post	设置表单以何种方式发送到指定页面
name	form_name	表单的名称
target	_blank、_self、_parent、_top	在何处打开action URL（新页面还是当前页面等）
enctype	application/x-www-formurlencoded multipart/form-data text/plain	在发送表单数据之前如何对其进行编码