written in front
Hello everyone, I am [ Lin-Xiaobai ], a student majoring in software engineering , who likes computer knowledge . I hope everyone can learn and progress together ! I am a college student , and my professional level is limited. If you find any mistakes or deficiencies , please correct me! thank you all! ! !
If brothers and sisters are interested in my articles, please don't be stingy with your little hands, give more likes and follow ! ❤❤❤ Love you guys! ! !
Table of contents
1.5 The use of fieldset and legend (understand)
【Past review】
【HTML Series】Chapter 4 Lists and Tables
【HTML Series】Chapter 3 Image Tags and Hyperlinks
【HTML Series】Chapter 2 HTML Basics
【HTML Series】Chapter 1 Introduction to HTML
[HTML series] Pre-chapter · HTML preamble knowledge
【other series】
1. Form
1.1 Basic structure
- Concept: An area containing interactions for collecting user-supplied data.
- Simple sorting:
- In this section, we first remember the overall form of the form, and we will explain the form controls in detail later.
Sample code:<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>表单_基本结构</title> </head> <body> <form action="https://www.baidu.com/s"> <input type="text" name="wd"> <button>去百度搜索</button> </form> <hr> <form action="https://search.jd.com/search" target="_blank" method="get"> <input type="text" name="keyword"> <button>去京东搜索</button> </form> <hr> <a href="https://search.jd.com/search?keyword=手机">搜索手机</a> </body> </html>
1.2 Common Form Controls
① Text input box
<input type="text">
- Common attributes are as follows:
- name attribute: the name of the data.
- value attribute: the default input value of the input box.
- maxlength attribute: the maximum input length of the input box.
② Password input box
<input type="password">
- Common attributes are as follows:
- name attribute: the name of the data.
- value attribute: the default input value of the input box (generally not used, meaningless).
- maxlength attribute: the maximum input length of the input box.
③ radio button<input type="radio" name="sex" value="female">女 <input type="radio" name="sex" value="male">男
- Common attributes are as follows:
- name attribute: the name of the data, note: if you want a single-selection effect, the value of the name attribute of multiple radios must be consistent.
- value attribute: submitted data value.
- checked attribute: Let the radio button be selected by default.
④ check box<input type="checkbox" name="hobby" value="smoke">抽烟 <input type="checkbox" name="hobby" value="drink">喝酒 <input type="checkbox" name="hobby" value="perm">烫头
- Common properties are as follows:
- name attribute: the name of the data.
- value attribute: submitted data value.
- checked attribute: Let the check box be selected by default.
⑤ Hidden field<input type="hidden" name="tag" value="100">
- An input area that is not visible to the user, and is used to:
- When submitting the form, carry some fixed data.
- name attribute: specifies the name of the data.
- value attribute: specifies the real submitted data.
⑥ Submit button
<input type="submit" value="点我提交表单"> <button>点我提交表单</button>
- Notice:
- The default value of the type attribute of the button tag is submit .
- button do not specify the name attribute
- The button written by the input tag uses the value attribute to specify the button text.
⑦ Reset button
<input type="reset" value="点我重置"> <button type="reset">点我重置</button>
- important point:
- button do not specify the name attribute
- The button written by the input tag uses the value attribute to specify the button text.
⑧ Normal button<input type="button" value="普通按钮"> <button type="button">普通按钮</button>
- important point:
- The type value of the normal button is button , if the type value is not written, submit will cause the form to be submitted.
⑨Text field<textarea name="msg" rows="22" cols="3">我是文本域</textarea>
- Common attributes are as follows:
- rows attribute: Specifies the number of rows displayed by default, which will affect the height of the text field.
- cols attribute: Specifies the number of columns displayed by default, which will affect the width of the text field.
- The type attribute cannot be written , and other attributes are consistent with ordinary text input boxes.
⑩ drop-down box<select name="from"> <option value="黑">黑龙江</option> <option value="辽">辽宁</option> <option value="吉">吉林</option> <option value="粤" selected>广东</option> </select>
- Common attributes and precautions:
- name attribute: specifies the name of the data.
- The option tag sets the value attribute. If there is no value attribute, the submitted data is the text in the middle of the option ; if the value attribute is set , the submitted data is the value of the value (it is recommended to set the value attribute)
- The option tag sets the selected attribute, which means it is selected by default.
Demo code:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>表单_常用控件</title> </head> <body> <form action="https://search.jd.com/search"> 账户： <input type="text" name="account" value="zhangxianglin" maxlength="16"> <br> 密码： <input type="password" name="psw" value="" maxlength="8"> <br> 性别： <input type="radio" name="gender" value="fale">男 <input type="radio" name="gender" value="female">女 <br> 爱好： <input type="checkbox" name="hobby" value="computer game">玩游戏 <input type="checkbox" name="hobby" value="shopping" checked>购物 <input type="checkbox" name="hobby" value="play football">踢足球 <input type="checkbox" name="hobby" value="watch">看电影 <br> 其他： <textarea name="other" rols="30" rows="10"></textarea> <br> 籍贯： <select name="place"> <option value="赣" selected>江西</option> <option value="湘">湖南</option> <option value="粤">广东</option> <option value="桂">广西</option> <option value="皖">安徽</option> </select> <input type="hidden" name="from" value="toutiao"> <br> <button type="submit">确认</button> <input type="submit" value="确认"> <button type="reset">重置</button> <input type="reset" value="重置"> <button type="button">普通按钮</button> <input type="button" value="普通按钮"> </form> </body> </html>
1.3 Disable form controls
- Setting disabled to the label of the form control can disable the form control.
- input , textarea , button , select , option can all set the disabled property
1.4 label label
- The label tag can be associated with the form control. After the association, click the text, and the corresponding form control will get the focus. The two ways of associating with labels are as follows:
- Make the value of the for attribute of the label tag equal to the id of the form control .
- Put the form control inside the label tag.
1.5 The use of fieldset and legend (understand)
- fieldset can group form controls, and the legend tag is the title of the group.
Demo code:
<fieldset> <legend>主要信息</legend> <label for="zhanghu">账户：</label> <input id="zhanghu" type="text" name="account" maxlength="10"><br> <label> 密码： <input id="mima" type="password" name="pwd" maxlength="6"> </label> <br> 性别： <input type="radio" name="gender" value="male" id="nan"> <label for="nan">男</label> <label> <input type="radio" name="gender" value="female" id="nv">女 </label> </fieldset>
1.6 Form summary
epilogue
I will continue to update the article! I hope everyone will click three times , your encouragement is the motivation for the author to keep updating
