表单 - 简书

1、表单

表单1

表单2

上图都是表单，官方点说

表单就是用户可以在其中提供一定的数据或信息或选项的一些html元素。表单通常有一个“提交”按钮，然后可以将这些数据据/信息/选项提供给服务器上的程序使用——数据处理。

表单的核心是数据

表单标签的构成和形式：

<form name="form1" action="将表单中数据提交给的对象（PHP文件名) method="post">"
第一个表单项
第二个表单项
……
</form>

基础表单

表单种类及属性
①单行文本框

<input type="text" name="n1"/>

属性	作用
value	设置其中初始文字
size	设置输入框的宽度
maxlength	设置输入框最多输入字符个数
readonly	只读（无值）
disable	设置输入框无效，即数据无效

②密码框

<input type="password" name="n2" />

属性	作用
value	设置其中初始文字
size	设置输入框的宽度
maxlength	设置输入框最多输入字符个数

③单选项

<input type="radio" name="n3" value="某个值" />

说明：单选项通常必有value值

属性	作用
checked	表示该选项默认是选中的状态。（无值属性）
name	一组的单选项name值必须相同

除了上面的属性以外还有：

属性	作用
checked	表示该选项默认是选中的状态。（无值属性）
name	一组的单选项name值必须相同

④多选项

<input type="checkbox" name="n4" value="某值">

说明：单选项通常必有value值

属性和单选项相同

⑤提交按钮

<input type="submit" name="n5" value="提交文字" action="提交表单数据的文件" />

⑥图片按钮

<input type="image" name="n6" src="图片地址" />

⑦重置按钮

<input type="reset" name="n7" value="重置" />

会将表单的所有用户填写或选择数据恢复到初始状态

⑧普通按钮

<input type="button" name="n8" value="文字" />

对表单没有影响，但可以从中产生“动作”以实现其他要求

⑨文件域

<input type="file" name="n9" />

可以让客户选择本地文件，发送到服务器

⑩隐藏域

<input type="hidden" name="n10" />

说明：界面上不可见，但是作为一份“隐藏的数据”提交给服务器——编程所需。

其他类型表单
a)下拉选择：用select和option标签配合实现

<select name="n11" multiple="multiple">
    <option value=”1” >文字1</option>
            <option value=”2” selected=”selected” >文字2</option>
            <option value=”3” >文字3</option>
                ……
</select>

说明：option标签上可以使用selected属性，表明该select元素的默认选中的项（默认是第一项被选中）。
select标签上可以使用multiple属性，使该select元素可以“选择多项”（即默认只能选一个）

文字不过瘾，图片来说明：

下拉选择

b)多行选择（列表选项）：

<select name=”n12” size=”4”>
            <option value=”1” >文字1</option>
            <option value=”2” >文字2</option>
            <option value=”3” >文字3</option>
                ……
</select>

来！上图！

多行选择

c)多行文本框

<textarea name=”n13” rows=”行数”  cols=”列数”>内容</textarea>

说明：rows设定的行数是数字，表示该多行文本框可以显示的文字行数。
cols设定的列数是数字，表示该多行文本框可以显示的一行文字中个数。
此标签没有value属性。但其实际的“值”是放在此标签中间的所有内容。

多行文本框

表单项都必须有name属性，以表明其“名字”——服务器取其中的数据就是凭此名字。

表单的全面应用：（放大招了嗷！）

<body>
    <h3>用户注册</h3>
    <form action="abc.php" method="post">
    <table width="500" border="1" >
        <tr>
            <td width="100" align="right">真实姓名：</td>
            <td><input type="text" name="userName" value="请输入你的真实姓名" /></td>
        </tr>
        <tr>
            <td width="100" align="right">密码：</td>
            <td><input type="password" name="userPswd" /></td>
        </tr>
        <tr>
            <td width="100" align="right">性别：</td>
            <td>
                <input type="radio" name="sex" value="男" />男
                <input type="radio" name="sex" value="女" />女
                <input type="radio" name="sex" value="打死不说" />打死也不说
            </td>
        </tr>
        <tr>
            <td width="100" align="right">爱好：</td>
            <td>
                <label><input type="checkbox" name="aihao" value="1" />篮球</label>
                <label><input type="checkbox" name="aihao" value="2" />排球</label>
                <input type="checkbox" name="aihao" value="3" />足球
                <input type="checkbox" name="aihao" value="4" />中国足球
            </td>
        </tr>
        <tr>
            <td width="100" align="right">身份：</td>
            <td>
                <select name="shenfen" size="4">
                    <option value="1" >已工作</option>
                    <option value="2" >大学</option>
                    <option value="3" >中学</option>
                    <option value="4" >什么叫身份</option>
                </select>

            </td>
        </tr>
        <tr>
            <td width="100" align="right">居住地：</td>
            <td>
                <select name="sheng" size="1">
                    <option value="1" >北京</option>
                    <option value="2" selected="selected">上海</option>
                    <option value="3" >山东</option>
                    <option value="4" >河北</option>
                </select>
                <br />
                <select name="city" >
                    <option value="" >请选择城市</option>
                    <option value="1" >北京</option>
                    <option value="2" >上海</option>
                    <option value="3" >济南</option>
                    <option value="4" >青岛</option>
                    <option value="5" >石家庄</option>
                    <option value="6" >邯郸</option>
                </select>
            </td>
        </tr>
        <tr>
            <td width="100" align="right">你的简历：</td>
            <td>
                <textarea name="jianli" rows="4" cols="40"></textarea>
            </td>
        </tr>
        <tr>
            <td width="100" align="right">你的照片：</td>
            <td><input type="file" name="zhaopian" /></td>
        </tr>
        <tr>
            <td width="100" align="right"></td>
            <td>
                <input type="submit" name="submit1" value="免费注册" />
                <input type="reset" name="reset1" value="重置" />
                <input type="button" name="button1" value="普通按钮" />
            </td>
        </tr>
        <tr>
            <td width="100" align="right"></td>
            <td>
                <label><input type="checkbox" name="tongyi" value="1" />同意注册协议</label>
            </td>
        </tr>
    </table>
    </form>
</body>

实现效果：

实现效果

如果你看到这里！你都懂了！那么~你的表单和表格棒棒哒！

表单

推荐阅读更多精彩内容