webBasic_day02_form_radil_checkbox_select

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>

总结

  1. 只用含有name属性的表单控件才可以提交数据
  2. 单选按钮和多选框需要设置value属性,才可以提交数据
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值