web基础（html的表单）

表单
用于显示，搜集信息并提交到服务器
就是从浏览器向服务器传输数据的手段
表单二要素
form元素
action：表单提交的URL
method：指出表单数据提交的方式
enctype：表单数据进行编码的方式
表单控件
input元素（9个，之间用type区分）
文本框：`<input type = "text">
密码框：<input type = "password">
单选框：<input type = "radio">
复选框：<input type = "checkbox">
主要属性：
value：文本，当提交form时，如果选中了此单选按钮，那么value就被发送到服务器
name：用于实现分组，一组单选框或者复选框名称必须相同
checked：设置选中
隐藏域：<input type = "hidden"/>
在表单中不希望用户看到的信息
文件选择框：<input type = "file"/>
选择要上传的文件

提交按钮：<input type = "submit"/>
传送表单数据给服务器端或其他程序处理
重置按钮：<input type = "reset">
清空表单的内容并把所有表单控件设置为最初的默认值
普通按钮：<input type = "button">
用于执行客户端脚本（需js定义功能）
主要属性：
value：
按钮的名字
其他元素（3个，之间用标签名区分）
label
label 管理表单中的文本
可以将文本和控件绑定在一起，从而增加了控件的应用性
id是元素的唯一标识，相当于元素的身份证号
任何元素都可以有id
程序员有义务保障元素的id不重复
select
下拉选
selected：设置默认选中
textarea
相当于多行文本框
语法：<textarea>文本</textarea>
主要属性：
cols：指定文本区域的列数
rows：指定文本区域的行数
readonly：只读

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!-- 表单元素
        用来声明数据提交范围
            只有在此元素内的数据可以提交给服务器
            action:声明数据提交的目标
         -->
    <form action = "http://www.baidu.cn">
        <!-- 表单控件
                用于让用户输入数据-->
        <!-- input元素（9个）
                之间用type属性区分 -->
        <!-- 文本框
            value:设置默认值
            maxlength：设置最大长度
            readonly：设置只读 -->
        <p>
            账号：<input type = "text"
                value = "tarena"
                maxlength = "10"
                readonly/>
        </p>
        <!-- 密码框
            属性同上-->
        <p>
            密码：<input type = "password">
        </p>
        <!-- 单选框 
            name: 组名，同一组radio互斥
            checked：设置默认选中-->
        <p>
            性别：
                <input type = "radio" name = "sex"checked>男
                <input type = "radio" name = "sex">女

        </p>
        <!-- 多选框 -->
        <p>
            兴趣：
                <input type = "checkbox"/> 音乐
                <input type = "checkbox" checked> 看书
                <input type = "checkbox"/> 打球
        </p>
        <!-- 文件框 -->
        <p>
            头像：<input type = "file"/>
        </p>
        <!-- 隐藏框 -->
        <p>
            <input type = "hidden" value = "abc">
        </p>
        <!-- 提交按钮 -->
        <p>
            <input type = "submit" value = "注册">
        </p>
        <!-- 重置按钮 -->
        <p>
            <input type = "reset" value = "重置"> 
        </p>
        <!-- 普通按钮 -->
        <p>
            <input type = "button" value = "没用">

        </p>
        <!-- 其他元素（3）个
        <!-- label 管理表单中的文本 
            可以将文本和控件绑定在一起，从而增加了控件的应用性
            id是元素的唯一标识，相当于元素的身份证号
                任何元素都可以有id
                    程序员有义务保障元素的id不重复-->
        <P>
            <input type = "checkbox" id = "c1"/>
            <label for = "c1">已读</label>

        </P>
        <!-- select：下拉选
            selected：设置默认选中 -->
        <P>
            数字：
            <select>
                <option>选择</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </P>
        <!-- textarea：文本域 -->
        <P>
            简介：
            <textarea rows="10" cols="50">这是默认值</textarea>
        </P>
    </form>


</body>
</html>

web基础（html的表单）

猜你喜欢