In this SharePoint tutorial, we will discuss HTML form web part in SharePoint. What is the HTML Form web part is in SharePoint 2016/2013/Online. How to configure the HTML Form web part to a list
The HTML Form web part is available in SharePoint 2013/2016 and SharePoint online also.
At the end of the example, you will see the HTML form web part will show a textbox and a button to filter records from a SharePoint list which is available on the same page.
HTML Form Web part in SharePoint 2016/2013/Online
HTML Form web part is a web part where we can filter a column of data by giving the HTML source code. We can use various HTML input codes.
HTML form web part is an alternative to the content editor web part with some other features are available. Here we will see how we can filter and display data in another web part using HTML form web part in SharePoint.
In this example, we will see how we can use HTML form web part to connect and pass data to another web part to filter the records.
You can have more than one HTML form elements like text box, radio button, checkbox, etc. but you can only use one field to connect to the list view web part.
The following steps to be followed to configure the HTML Form web part in a web part page.
Step-1: Here I have created a SharePoint list which contains the following column:
- Vendor name
- Colour Available
- Review
- Size
Step-2: Go to SharePoint web part page. Click on “Add a Web Part“. In the header part of the page, we can find the options. Add the “HTML Form Web Part“.
Step-3: Now add a list to the web part page. Here I am Adding the Vendor List and add to SharePoint 2016 web part page.
Configure HTML Form Web part in SharePoint
Once we the HTML form web part, now we can configure HTML form web part in SharePoint.
Step-4: To create a connection to the list web part, Select Connections in the web part like below. Click on “Provide Form Values To” we can see our list name click on that.
Step-5: One dialogue box will come to select the “Get Filter Values Forms” from the drop-down option click on Configure.
Step-6: Another dialogue box will come to select the “Consumer Field Name” from the drop-down. Here I am selecting the Vendor Name then click on Finish.
Step-7: After giving the connection we will get the page like below.
Step-8: While we will search for any items in the HTML text field and click on go I will get only the particular row information. Here I am giving “Hier” in that text field and click on “Go “. We can notice that it only show the “Hier” information.
Customize HTML Form Web Part in SharePoint
We can customize the HTML form web part in SharePoint by using the Source editor web part which is available in the web part tools page. And we can also customize the HTML form web part using SharePoint designer.
By default, there will be an input text box and a button control will be there, but we can also add other controls like option buttons, check boxes, multi-line text boxes, and list boxes. But we need to make sure that all field names should be unique.
Below are a few examples of how we can use input controls in HTML form web part.
Multi-line textbox:
<textarea name="comments" rows=5 cols=30></textarea>Options button:
<input type="radio" name="department" value="HR"/>HR<BR/>
<input type="radio" name="department" value="Finance"/>Finance<BR/>
<input type="radio" name="department" value="IT"/>IT<BR/>
<input type="radio" name="department" value="Training"/>Training<BR/>Drop-down list of choices:
<select name="department">
<option value="HR">HR</option>
<option value="Finance">Finance</option>
<option value="IT" selected="selected">IT</option>
<option value="Training">Training</option>
</select>Checkboxes:
<input type="checkbox" name="department" value="HR"/>HR<BR/>
<input type="checkbox" name="department" value="Finance"/>Finance<BR/>
<input type="checkbox" name="department" value="IT" checked="checked"/>IT<BR/>
<input type="checkbox" name="department" value="Training"/>Training<BR/>Read 20 SharePoint web part examples:
- Picture Library Slideshow Web Part in SharePoint Online
- Relevant document web part in SharePoint 2016
- Script Editor Web Part in SharePoint 2016
- Media Web Part in SharePoint 2016
- What is List Filter Web Part? How to Configure and Use List Filter Web Part in SharePoint 2016?
- Contact Details Web Part in SharePoint 2016
- Image Viewer web part in SharePoint 2016
- Text Filter Web part in SharePoint 2016
- Query string filter web part in SharePoint 2016
- Current User Filter Web Part in SharePoint 2016
Conclusion:
In this post, we learned what is the HTML Form web part and how to configure an HTML Form web part inside a web part page in SharePoint 2016, SharePoint 2013 or in SharePoint Online.
Hello Everyone!! I am Bhawana a SharePoint MVP and having about 10+ years of SharePoint experience as well as in .Net technologies. I have worked in all the versions of SharePoint from wss to Office 365. I have good exposure in Customization and Migration using Nintex, Metalogix tools. Now exploring more in SharePoint 2016 🙂 Hope here I can contribute and share my knowledge to the fullest. As I believe “There is no wealth like knowledge and no poverty like ignorance”
Doesn’t work in Modern sites.
Is it possible to use a wildcard in the HTML form web part? I have a phone directory with a combined lastname,firstname field and it will work if I type in Smith, John, but I want to be able to just search for Smith. We have Sharepoint 2013 foundation, so there is no easy ability to filter a list.