制作html表单
客户端(每个用户的计算机)在浏览网页时,都会向服务器(后台)端索要数据,然后将得
到的数据呈现在浏览器当中。除了索要数据之外,有时客户端也希望能够向服务器端发送
一些数据。
这时我们就需要表单,如百度的输入框,注册时的输入框和按钮都是表单。
表单
<form action=””></form>
表单元素(能单独用)
<input type=”text”><br>
<input type=”password”>放到表单里面
<button>提交</button>
通用格式:<input type=”类型” name=”” value=””>
属性: name value给后台发送的值
文本类型 属性:readonly(只读,属性名跟属性值一样的可以不写属性值)maxlength(最大 写入长度值) size(栏位显示宽度)disabled (不可操作的)
Text(普通文本), password(密码框),hidden(隐藏域,页面上看不见,但 会传到后台)
textarea(特殊格式)<textarea name=””id=”” cols=“ ” rows=””></textarea> 将内容提交后台
选择类型 属性:checked(默认选中)如果想设置必须选择某项,加checked和disabled
Selected (option的默认选中)multiple 将下拉选项全部显示
Size=“数字”显示多少个选项
Radio(单选)当name值分为一组生效 checkbox(多选)
Select(特殊格式,下拉) <select name=””id=””> <option value=””>
按钮类型
button(普通按钮)reset(重置按钮)
Submit (提交按钮)=<button></button>(必须在表单内)
按钮图像:<button name=”栏位名称” type=”图象形态”>
<img src=”URL”>
</button>
图像按钮:<input type="image" src="url" alt="文本">
其他类型
File(文件) date(时间日期) color(颜色)。。。。。。。
表单属性
Action(往哪提交,指到指定文件)
Method(提交方式)默认为get: ***php?text=***&password=***** 不安全
Post 不显示,较安全
Enctype multipart/form-data(发送文件)
<fieldset>
修饰表单
</fieldset>
<Legend>表单标题,与<form>同级
表单的功能结构:
主标记结构:<from>…</from>
属性 值 说明
name 字符串 给这个表单起个名字
method get/post 表单的传输方式
action url 传输目标
enctype="multipart/form-data"
文本栏、密码栏、隐藏栏
文本栏:<input type=”text” name=”栏位名称” value=”栏位内定值” size=”栏位显示宽度” maxlength=”栏位数据输入最大长度” readonly=”readonly”>
密码栏:<input type=”password” name=”栏位名称” value=”栏位内定值” size=”栏位显示宽度” maxlength=”栏位数据输入最大长度” readonly=”readonly”>
隐藏性栏位:<input type=”hidden” name=”栏位名称” value=”栏位值”>
复选栏、单选栏
多重勾选栏位:<input type=”checkbox” name=”栏位名称” value=”内定值” checked=”checked” disabled=”disabled”>
单选栏位:<input type=”radio” name=”栏位名称” value=”内定值” checked=”checked” disabled=”disabled”>
窗体栏位、区块栏位
窗体选项栏位设置:<select name=”栏位名称” size=”数字” >
<option value=”选项值” selected=”selected”>…
<option value=”选项值”>…
<option value=”选项值”>…
</select>
//分组<optgroup label="分组名称"></optgroup>
//多选multiple
文字区块的设置:<textarea cols=”设置长度” rows=”设置宽度”>
………
</textarea>
按钮、图像按钮
按钮设置: <input type=”submit” value=”按钮中显示的文字”>
<input type=”reset” value=”按钮中显示的文字”>
按钮图像:<button name=”栏位名称” type=”图象形态”>
<img src=”URL”>
</button>
图像按钮:<input type="image" src="url" alt="文本">
允许上传文件
上传栏位:<input type="file" name="file">
表单加上外框和标题
外 边 框:<fieldset>...</fieldset>
标 题:<legend>...</legend>