html表单笔记

来源：互联网发布：软件概要设计说明书编辑：程序博客网时间：2024/06/06 17:18

表单

表单的组成：
表单标签表单域表单按钮
表单元素：文本域单选框复选框按钮列表
表单本生不可见，可见的是表单元素

form标签中，以下标签实现表单元素的添加：
<input> 表单输入标签
<select> 菜单和列表标签
<option> 菜单和列表项目标签
<textarea> 文字域标签
<optgroup> 菜单和列表项目分组标签

<input>标签：
<input type="类型属性" name="名称" ....../>
type属性值描述
text 文字域
password 密码域
file 文件域
checkbox 复选域
radio 单选域
button 按钮
submit 提交按钮
reset 重置按钮

hidden 隐藏域

image 图像域

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

下拉菜单和列表标签：

<select><option>标签：

......

</select>

<select>标签属性：

name 设置下拉菜单和列表名称

multiple 设置可选择多个选项

size 设置列表中可见选项的数目

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

<select><optgroup>标签：

......

</optgroup>

......

</optgroup>

</select>

多行文本域<textarea>：

内容

</textarea>

<textarea>标签属性：

placeholder 设置描述文本区域预期值的简短提示。

表单工作原理：

浏览器将用户在表单中输入的数据进行打包，并发送给服务器，服务器接收数据后将数据转由程序处理。

表单元素

</form>

action url提交表单向何处发送表单数据

method get post设置表单以何种方式发送到指定页面

target _blank_self_parent_top在何处打开action url

enctype application/x-www-form-urlencoded multipart/form-data text/plain在发送表单数据之前如何对其进行编码

post和get的区别:

get：

使用url传递参数

对所发送的信息的数量也有限制

一般用于信息获取

post：

表单数据作为http请求体的一部分

对所发送信息的数量无限制

一般用于修改服务器上的资源

注：table需要放在form内层是因为表格的数据需要表单进行提交，如果仅仅只需要实现则可以不用放在form内层。

<!DOCTYPE html><html><head><title>表单</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body><h1 align="center">注册信息</h1><hr color="#336699"/><form action="action.php" method="post"><table width="600px" bgcolor="#f2f2f2" align="center"><tr>            <td align="right">姓名：</td>            <td align="left"><input type="text" name="user_name" size="25" maxlength="6" placeholder="请输入姓名" /></td></tr><tr>            <td align="right">邮箱：</td>            <td align="left"><input type="text" name="user_mail" value="@163.com"/></td></tr><tr>            <td align="right">密码：</td>            <td align="left"><input type="password" name="user_password" size="25" maxlength="6" placeholder="请输入密码"/></td></tr><tr>            <td align="right">确认密码：</td>            <td align="left"><input type="password" name="comfirm_password" size="25" maxlength="6" placeholder="请输入密码"/></td></tr><tr>            <td align="right">上传照片：</td>            <td align="left"><input type="file" name="user_file"/></td></tr><tr>            <td align="right">性别：</td>            <td align="left">            男<input type="radio" name="user_sex" value="man"/>            女<input type="radio" name="user_sex" value="woman"/>            保密<input type="radio" name="user_sex" value="secret" checked/>            </td></tr><tr>            <td align="right">爱好：</td>            <td align="left">            读书<input type="checkbox" name="user_dx1" value="read"/>            跳舞<input type="checkbox" name="user_dx1" value="dance"/>            唱歌<input type="checkbox" name="user_dx1" value="sing"/>            无<input type="checkbox" name="user_dx1" value="none" checked/>            </td></tr>                  <tr>                        <td align="right">城市：</td>                        <td align="left">                              <select name="city" multiple size="6">                                    <option value="bj">北京</option>                                    <option value="sh">上海</option>                                    <option value="cs">长沙</option>                                    <option value="wh">武汉</option>                                    <option value="gz">广州</option>                                    <option value="sz">深圳</option>                              </select>                              <select name="city">                                    <option value="xz" selected>--请选择--</option>                                    <option value="bj">北京</option>                                    <option value="sh">上海</option>                                    <option value="cs">长沙</option>                                    <option value="wh">武汉</option>                                    <option value="gz">广州</option>                                    <option value="sz">深圳</option>                              </select>                               <select name="city">                                    <option value="xz" selected>--请选择--</option>                                    <optgroup label="北方">                                          <option value="bj">北京</option>                                    </optgroup>                                    <optgroup label="南方">>                                          <option value="sh">上海</option>                                          <option value="cs">长沙</option>                                          <option value="wh">武汉</option>                                          <option value="gz">广州</option>                                          <option value="sz">深圳</option>                                    </optgroup>                              </select>                              <select name="city" multiple size="6">                                    <option value="xz" selected>--请选择--</option>                                    <optgroup label="北方">                                          <option value="bj">北京</option>                                    </optgroup>                                    <optgroup label="南方">>                                          <option value="sh">上海</option>                                          <option value="cs">长沙</option>                                          <option value="wh">武汉</option>                                          <option value="gz">广州</option>                                          <option value="sz">深圳</option>                                    </optgroup>                              </select>                        </td>                  </tr>                  <tr>                        <td align="right">简介：</td>                        <td align="left">                               <textarea name="jianjie" rows="5" cols="10" placeholder="请输入简介">                                    abcdefghijklmnopqrstuvwxyz                              </textarea>                        </td>                  </tr><tr>            <td colspan="2" align="center" >                        <input type="button" value="来点我" name="button"/>            <input type="submit" value="来提交" name="submit"/>            <input type="reset" value="来清除" name="reset"/>            </td></tr></table></form></body></html>

阅读全文

0 0