小毛

前端代码-form表单
form表单知识:<!DOCTYPE html> <html lang="en&quo...
扫描右侧二维码阅读全文
25
2019/07

前端代码-form表单

form表单知识:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="https://www.baidu.com">
        <h1>单选框-关键词Radio</h1>
        性别:<input type="radio" name="man" checkec id = "sex_nan" checked>
            <label for="sex_nan">男</label>
            <input type="radio" name="man" id = "sex-girl">
                <label for="sex-girl">女</label>
                    <input type="text" placeholder="请输入你要搜索的内容" name="wd">
            <input type="submit" value="百度搜索">
    </form>

<!-- 代码区域:-->
<!-- < action="https://www.baidu.com">-->
<!-- <h1>单选框-关键词Radio</h1>-->
<!-- 性别:<input type="radio" name="man" checkec id = "sex_nan" checked>-->
<!-- <label for="sex_nan">男</label>-->
<!-- <input type="radio" name="man" id = "sex-girl">-->
<!-- <label for="sex-girl">女</label>-->

<form>
    <h1>多选框-关键字checkbox</h1>
    <input type="checkbox"name="checkbox"id="chifan">
    <label for="chifan">吃饭</label>
    <input type="checkbox" name="checkbox" id="sleep">
    <label for="sleep">睡觉</label>
    <input type="checkbox" name="checkbox" id="dadoudou">
    <label for="dadoudou">打豆豆</label>
                <input type="text" placeholder="请输入你要搜索的内容" name="wd">
        <input type="submit" value="百度搜索">
</form>



代码区域:
<!-- <form>-->
<!-- <h1>多选框-关键字checkbox</h1>-->
<!-- <input type="checkbox"name="checkbox"id="chifan">-->
<!-- <label for="chifan">吃饭</label>-->
<!-- <input type="checkbox" name="checkbox" id="sleep">-->
<!-- <label for="sleep">睡觉</label>-->
<!-- <input type="checkbox" name="checkbox" id="dadoudou">-->
<!-- <label for="dadoudou">打豆豆</label>-->
<!-- </form>-->
form 标签代表是声明一下这个是表单的意思,

action 参数代表的是,规定当前的表单发送到哪里去,

method 该参数是指,表单提交的方式,默认为俩种,get或者post提交方式

表单结构,form在最外面,然后内部是input标签,input标签也有很多种输入方式,比如单选框,多选框、用户名、密码、等方法。

placholder 该参数输入内容后,会在框框里面显示:提示用户输入的内容。

单选框是需要进行分组,才能是真正的单选框,这样可以给俩个单选框分组

也就是给他们共同定义一个name名字,然后他们俩就是一组了

想让用户点击名字也可以选择对应的单选框,则需要单选框和label标签进行绑定,也就是给单选框一个id属性,id属性是唯一的,然后绑定label标签

也就是 <label for="id"></label> 在此语句中,<label for=""></label> for指向的地址就是单选框,这样就完成了名字和单选框的绑定。

默认单选框选项。checak,

不准选中, disabled

autocomolete="off" 清除输入的缓存记录


下拉框

<select name="" id="" size="1">
    <option value="上海">上海</option>
    <option value="北京">河南</option>
    <option value="广东">广东</option>
    <option value="河南">北京</option>
    <option value="河北">河北</option>
</select>
</br>
</br>

selected="" 默认选项显示xxxx

文本域:

<textarea name="" id="" cols="30" rows="10"></textarea>

文本域-style-css属性:
resize:none; 禁止拉伸
resize:vertical 垂直方向可以拉伸
resize:horizontal 水平方向可以拉伸

提交按钮:

<form action="http://www.baidu.com/s?" method="post">
    <input type="text" name="wd">
    <input type="submit" value="点击我百度">
    <input type="reset" value="重置清除数据按钮">
</form>
    <form action="http://www.baidu.com/s?" method="get">
        <input type="text" placeholder="请输入你要搜索的内容" name="wd">
        <input type="submit" value="百度搜索">
    </form>

</body>
</html>

效果

表单.jpg

Last modification:July 25th, 2019 at 10:57 am
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment