表单

房东的喵

于 2020-04-29 17:07:22 发布

阅读量91

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/luxunlx123/article/details/105844183

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1.表单域
<form name="表单名" method="post/get" action=""></form>

get是从服务器上获取数据
post是向服务器上传数据
出于安全性考虑，建议使用post提交数据

2.表单控件

文本框：<input type="text" value="默认值"/> （value输入后不会消失  placeholder输入后点击后会消失） 
密码框：<input type="password"/>
按钮框：<input type="submit" value="按钮内容"/>
重置框：<input type="reset" value="按钮内容"/>
单选框：<input type="radio" name=""/>
复选框：<input type="checkbox" name=""/>

disable="disable" / disable禁用

例：
<p>性别：男<input type="radio" name="sex" disabled/>女<input type="radio" name="sex"></p>

checked="checked"  / checked
<p>性别：男<input type="radio" name="sex" checked/>女<input type="radio" name="sex"></p>

例：
    <body>
        <form name="表单名" method="post" action="">
        <p>姓名：<input type="text" /></p>
        <p>密码：<input type="password"/></p>
        <p><input type="submit" value="登录"/>&nbsp;<input type="reset" value="重新输入"/></p>
        <p>性别：男<input type="radio" name="sex" checked/>女<input type="radio" name="sex"></p>
        <p>爱好：打游戏<input type="checkbox" name="like"/>篮球<input type="checkbox" name="like"/>乒乓球<input type="checkbox" name="like"/>音乐<input type="checkbox" name="like"/></p>
        <p><input type="button" value="下一页"/></p>
    </form>
    </body>


3.下拉菜单

<select>
    <option>下拉选项1</option>
    <option>下拉选项2</option>
     ......
</select>

例：
    <body>
        <form name="f1" method="post" action="">
        <p>出生年月：           
            <select>
            <option>1990</option>
            <option>1991</option>
            <option>1992</option>
            <option>1993</option>
        </select>年
        <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>月
        </p>    
        </form>
    </body>


4.多行文本框
<textarea cols="" rows=""></textarea>

rows和clos属性设置输入窗口的高度和宽度，单位是字符

例：
    <body>
       <form name="f2" method="POST" action="">
        <p>个人简介：
        <textarea cols="50" rows="10">

        </textarea>
        </p>
        </form>    
    </body>