表单

84 阅读2分钟

表单的组成: 表单域 表单元素 提示信息
表单域:

<form action="url" method="提交方式" name="表单域名称">
  各种元素控件
<form/>
属性 属性值 作用
action url地址 用于指定接收处理表单数据的服务器程序的URL地址
method get/post 用于设置表单数据的提交方式,其取值为get或post
name 名称 用于指定表单的名称,以区分同一个页面中的多个表单域

表单元素:

①.inputl:输入表单元素
②.select:下拉表单元素
③.texearea:文本域元素

1.input:输入表单元素<input type="属性值"/>
type的属性值不同表示的控件类型不同

        <!-- text 文本框 -->
        <!-- maxlength 最大输入字符-->
        <!-- input 输入表单元素 type 类型 -->
        <label for="text">用户名:</label>
        <input type="text" id="text" name="usename" value="请输入" maxlength="6"><br />
        <!-- password 密码框 -->
        密码:<input type="password" name="password"><br />
        <!-- radio 单选按钮 -->
        性别:
        <label for="nan">男</label>
        <input id="nan" type="radio" name="sex" value="nan" checked="checked">
        <label for="nv">女</label>
        <input id="nv" type="radio" name="sex" value="nv"><br />
        <!-- checkbox 多选按钮 -->
        <!-- checked 被选中 -->
        爱好:
        吃饭<input type="checkbox" name="hobby" value="chifan" checked="checked">
        睡觉<input type="checkbox" name="hobby" value="shuijiao">
        打豆豆<input type="checkbox" name="hobby" value="dadou"><br />
        <!-- submit 提交按钮 -->
        <input type="submit" value="免费注册"><br />
        <!-- reset 重置按钮 -->
        <input type="reset" value="重新填写"><br />
        <!-- 点击按钮,搭配JS使用 -->
        <input type="button" value="获取验证码"><br />
        <!-- file 文件按钮 -->
        上传头像:<input type="file"><br />

        <!-- sleect 下拉表单元素 -->
        <!-- option 选项 -->
        <!-- selected 默认选择项 -->
        籍贯:<select>
            <option>山东</option>
            <option selected="selected">北京</option>
            <option>上海</option>
        </select><br />

        <!-- textarea 文本域表单元素 -->
        个人介绍:<textarea></textarea>
    </form>

网页中显示:

{07417569-30B8-4F47-903A-5CEEA9E489CB}.png.jpg

type的属性值 描述
text 文本框
password 密码框
radio 单选按钮
checkbox 复选按钮
reset 重置按钮
submit 提交按钮
button 点击按钮,搭配JS使用,例如“发送验证码”
file 上传按钮
hidden(不常用) 定义隐藏的输入字段
image(不常用) 定义图像形式的提交按钮

input的其他属性
属性 描述
name 定义input的名称
value 定义input的值,当用户输入后传给后台
checked checked="checked";规定此input元素首次加载时被选中
maxlength 正整数,用户输入的最长字符

⑴name和value是每个表单元素都有的属性值,主要给后台人员使用
⑵name为表单元素的名字,单选按钮和复选按钮要有相同的name值

<balel></label>
用于绑定表单元素,当用户点击到<label></label>内的文本时,浏览器会自动将光标选择到对应的表单元素上。
例:

<label for="sex"></label>
<input type="radio" name="xingbie" id="sex"/>

2.select:下拉表单元素
例:出生年月

<select>
    <option>01年</option>
    <option>02年</option>
    <option>03年</option>
</select>

selected="selected",在option定义,则当前项即为默认选中项
3.textarea:文本域元素 → <textarea></textarea>