webBasic_day02_form_radil_checkbox_select

最新推荐文章于 2021-06-07 17:13:21 发布

CXZ___deboke

最新推荐文章于 2021-06-07 17:13:21 发布

阅读量180

点赞数

分类专栏： webBasic 文章标签： form_checkbox_select_radio

本文链接：https://blog.csdn.net/CXZ___deboke/article/details/79591234

版权

webBasic 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

day02

表单及相关控件

    <body>
        <form action="url">
      <h3>新用户注册</h3>
    <div><!-- 文本输入框-->
      <span>用户名:</span>
      <input type="text">
    </div>
    <div><!-- 密码框-->
      <span>登录密码:</span>
      <input type="password">
    </div>
    <div>
       <input type="submit" value="注册">
    </div>
    </form>

form表单的主要属性

action 表单提交到哪个url

method 表单数据提交的方式 get post

enctype 表单数据的编码方式

input标签的属性

1.value 由访问者自由输入的任何文本

2.maxlength 设置文本控件输入的字符数

3.readonly 设置文本控件内容只读

radio和label的用法

<div>
    <input id="m" type="radio" name="gender" 
    checked="checked" value="男"><label for="m">男</label>
    <input id="f" type="radio" 
    name="gender" value="女">
    <label for="f">女</label>
</div>

checkbox

input中写id是为了`<label for="">`使用

input中type,checkbox是多选框

input中name,分组,提交submit

input中的value,为了提交,把数据传给服务器

    <h3>checkbox演示</h3>

    <div>
    <label>爱好</label>
        <input id="eat" type="checkbox" 
        name="hobby" value="eat">
        <label for="eat">吃</label>
        <input id="drink" type="checkbox" 
        name="hobby" value="drink">
        <label for="drink">喝</label>
        <input id="play" type="checkbox" 
        name="hobby" value="play">
        <label for="play">玩</label>
        <input id="happy" type="checkbox"
         name="hobby" value="happy">
        <label for="happy">乐</label>
    </div>

form表单中的按钮

submit 提交 value中写按钮上的文字

button 按钮点击之后可以调用JavaScript和JQ代码

reset 重置

隐藏域

用户看不到,但是可以存储数据的控件

    <div>
        <input  type="hidden"
         value="我是隐藏域的value" name="我是隐藏域">
    </div>

文件选择框

    <div>
        <input type="file" name="img">
    </div>

非input标签的form控件

文本域

<textarea></textarea>

下拉列表框(下拉选)

    <select>
        <option>北京</option>
        <option>山东</option>
        <option>三亚</option>
        <option>山西</option>
        <option>陕西</option>
        <option>贵州</option>
        <option>廊坊</option>
        <option selected="selected">雄安</option>
    </select>