html表单

1.语法:

表单本身不可见

表单元素有文本域，单选框，复选框，按钮，列表等

form标签中，以下标签实现单元素添加

表单输入标签

文字域标签 <optgroup>下拉菜单，列表项目分组标签 <input>标签单标记 语法: <input type="类型属性" name="名称".../> type属性: text 文字域 password密码域 file文件域 checkbox复选框 radio单选框 button按钮 submit提交按钮 reset重置按钮 hidden隐藏域 image图像域 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html";charset=utf-8"/> <title>基础表单<html> </head> <body> <h1 align="center">注册信息</h1> <hr color=#336699"/> <form> <table width="600px" bgcolor="#f2f2f2" align="center"> 2.单行文本域 <input type="text name="..."/> 属性 name 文字域名称 maxlength用户输入的最大字符长度 size文本框的宽度 value指定文本框的默认值 placeholder规定用户填写输入字段的提示 <tr> <td>姓名</td> <td><input type="text" name="username" size="25" maxlength="6" placeholder="请输入姓名"/></td> </tr> 3.密码框 <input type="password" name=" " /> 密码域也是文本域的形式 <tr> <td>邮箱:</td> <td><input type="text" name="email" value="@163.com"/></td> </tr> <tr> <td>密码</td> <td><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码"/></td> </tr> <tr> <td>确认密码</td> <td><input="password" name="paw_confirm" size="25" maxlength="6" placeholder="请再输入密码"/></td> </tr> 4.文件域 <input type="file" name="..."/> <tr> <td>上传照片</td> <td><input type="file" /></td> </tr> 5.单选框 <input type="radio" name="..." value="..." checked/>//checked为默认 <tr> <td>性别</td> <td>男<input type="radio" name="sex" value="man"/ > <td>女<input type="radio" name="sex" value="woman"/ > </td> </tr> 6.复选框 <input type="checkbox" /> <tr> <td>爱好的运动</td> <td>跑步<input type="checkbox" name="dx1" value="read" checked/> 跳舞<input type="checkbox" name="dx1" value="dance" /> 唱歌<input type="checkbox" name="dx1" value="sing" /></td> </tr> 7.按钮 <input type="button" name="..." value="..."/> <input type="submit" name="..." value="..."/> <input type="reset" name="..." value="..."/> <tr> <td><input type="buttton" value="来点我" name="button"/> <input type="submit" value="submit" name="submit"/> <input type="reset" value="reset" name="reset"/></td> </tr> 8.图像域 <input type="image" name="..." src="imageurl"/> <input type="image" name="image_button" src="image/image-button.png"/> 9.隐藏域 有些信息不想让用户看到但要传给服务器 <input type="hidden" name="..." value="..."/> <tr> <td><input="hidden" name="hidden" value="这是一个用户注册信息"/></td> </tr> 10.下拉菜单，列表标签 可节约空间 11.select属性 name设置下拉菜单和列表名称 multiple设置可选择多个选项 size设置列表中可见项目的数目 12option属性 selected设置选项初始选中状态 value定义送往服务器的选项值 <tr> <td>城市</td> <td> <select> <option value="bj" selected>北京</option> <option value="hb" selected>河北</option> <option value="sh" selected>上海</option> </selected> </td> </tr> 13label分组 <select name="..."> <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> <select name="city"> <optgroup label="华北"> <option value="tj">天津</option> <option value="jl">吉林</option> <option value="bj">北京</option> </optgroup> <optgroup label="华东"> <option value="sh">上海</option> <option value="js">江苏</option> <option value="hn">湖南</option> </optgroup> </select> 13.textarea多行文本域 属性 name设置文本区名称 placeholder设置文本域提示 rows设置文本域的可见行数 cols设置文本域的可见宽度 <textarea name="..." rows="..." cols="..."> <tr> <td>简介</td> <td><textarea name="jj" rows="6" cols="50" placeholder ="请输入个人信息">...

14表单页面调整

form标签

form属性

action url 提交时向何处发送

method get.post 何种形式发送

name form_name 表单名称

target _blank，._self，_parent 在何处打开action url

enctype .application/x_www_form_urlencoded

multipart/form_data

text/plain

在发送表单数据之前如何对其进行编码

14get post

get

使用url传递参数

对发送信息的数量有限制

一般用于信息获取保密性差

post

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

对发送信息的数量无限制

一般用于修改服务器上的资源保密性好

html表单

你可能感兴趣的:(html表单)